diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index d10a44c06..ea8da9d44 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -4,6 +4,7 @@
 
 - Fix `n-select` bug in using custom label, closes [#352](https://github.com/TuSimple/naive-ui/issues/352).
 - Fix `n-carousel` when `autoplay` dot active status isn't displayed correctly, closes [#434](https://github.com/TuSimple/naive-ui/issues/434).
+- Fix `n-input` fixed clearable position, closes [#428](https://github.com/TuSimple/naive-ui/issues/428).
 
 ### Feats
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 117cf4f4e..b58ac8e61 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -4,6 +4,7 @@
 
 - 修复 `n-select` 自定义 label 的显示问题，关闭 [#352](https://github.com/TuSimple/naive-ui/issues/352)
 - 修复 `n-carousel` 设定 `autoplay` 点击后 dot active 状态不正常，关闭 [#434](https://github.com/TuSimple/naive-ui/issues/434)
+- 修复 `n-input` 清空按钮位置引起的样式问题，关闭 [#428](https://github.com/TuSimple/naive-ui/issues/428)
 
 ### Feats
 
diff --git a/src/input/src/Input.tsx b/src/input/src/Input.tsx
index ce3ceb742..f0d055e78 100644
--- a/src/input/src/Input.tsx
+++ b/src/input/src/Input.tsx
@@ -943,7 +943,6 @@ export default defineComponent({
             this.loading !== undefined) ? (
             <div class={`${mergedClsPrefix}-input__suffix`}>
               {[
-                renderSlot(this.$slots, 'suffix'),
                 this.clearable || this.$slots.clear ? (
                   <NBaseClear
                     clsPrefix={mergedClsPrefix}
@@ -953,6 +952,7 @@ export default defineComponent({
                     {{ default: () => renderSlot(this.$slots, 'clear') }}
                   </NBaseClear>
                 ) : null,
+                renderSlot(this.$slots, 'suffix'),
                 this.loading !== undefined ? (
                   <NBaseSuffix
                     clsPrefix={mergedClsPrefix}
@@ -1025,7 +1025,6 @@ export default defineComponent({
             </div>
             <div class={`${mergedClsPrefix}-input__suffix`}>
               {[
-                renderSlot(this.$slots, 'suffix'),
                 this.clearable || this.$slots.clear ? (
                   <NBaseClear
                     clsPrefix={mergedClsPrefix}
@@ -1034,7 +1033,8 @@ export default defineComponent({
                   >
                     {{ default: () => renderSlot(this.$slots, 'clear') }}
                   </NBaseClear>
-                ) : null
+                ) : null,
+                renderSlot(this.$slots, 'suffix')
               ]}
             </div>
           </div>