From 09dad70cfb0c342e46fa21fc8c7f86bd71b80ae7 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Mon, 1 Feb 2021 00:48:26 -0600
Subject: [PATCH] docs(docs): fix style of demo card header (#1405)

* docs(docs): fix style of card header

* docs: update
---
 website/demo-styles/card.scss     | 15 ++++++++++++-
 website/demo-styles/index.scss    |  1 +
 website/demo-styles/skeleton.scss | 12 ++++++++---
 website/demo-styles/space.scss    | 12 +++++++++++
 website/docs/en-US/card.md        | 36 +++++++++++--------------------
 website/docs/en-US/skeleton.md    |  8 +++----
 website/docs/en-US/space.md       | 24 +++++++--------------
 website/docs/es/card.md           | 36 +++++++++++--------------------
 website/docs/es/skeleton.md       |  8 +++----
 website/docs/es/space.md          | 24 +++++++--------------
 website/docs/fr-FR/card.md        | 36 +++++++++++--------------------
 website/docs/fr-FR/skeleton.md    |  8 +++----
 website/docs/fr-FR/space.md       | 24 +++++++--------------
 website/docs/jp/card.md           | 36 +++++++++++--------------------
 website/docs/jp/skeleton.md       |  8 +++----
 website/docs/jp/space.md          | 24 +++++++--------------
 website/docs/zh-CN/card.md        | 36 +++++++++++--------------------
 website/docs/zh-CN/skeleton.md    |  6 +++---
 website/docs/zh-CN/space.md       | 24 +++++++--------------
 19 files changed, 160 insertions(+), 218 deletions(-)
 create mode 100644 website/demo-styles/space.scss

diff --git a/website/demo-styles/card.scss b/website/demo-styles/card.scss
index a558b14962..8293952141 100644
--- a/website/demo-styles/card.scss
+++ b/website/demo-styles/card.scss
@@ -1,4 +1,10 @@
 .demo-block.demo-card {
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   .text {
     font-size: 14px;
   }
@@ -11,15 +17,22 @@
   .bottom {
     margin-top: 13px;
     line-height: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .item {
     margin-bottom: 18px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   .button {
     padding: 0;
-    float: right;
+    min-height: auto;
   }
 
   .image {
diff --git a/website/demo-styles/index.scss b/website/demo-styles/index.scss
index 28b0915e4b..5e2edd56e7 100644
--- a/website/demo-styles/index.scss
+++ b/website/demo-styles/index.scss
@@ -46,3 +46,4 @@
 @import "./avatar.scss";
 @import "./drawer.scss";
 @import "./skeleton.scss";
+@import "./space.scss";
diff --git a/website/demo-styles/skeleton.scss b/website/demo-styles/skeleton.scss
index d68bd7068a..c349db827c 100644
--- a/website/demo-styles/skeleton.scss
+++ b/website/demo-styles/skeleton.scss
@@ -1,9 +1,14 @@
 .demo-block.demo-skeleton {
-
   .el-card {
     margin-bottom: 16px;
   }
 
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   .time {
     font-size: 13px;
     color: #999;
@@ -16,14 +21,15 @@
 
   .button {
     padding: 0;
-    float: right;
+    min-height: auto;
   }
 
   .image {
     &.multi-content {
       width: 400px;
-      height: 267px; 
+      height: 267px;
     }
+
     width: 100%;
     display: block;
   }
diff --git a/website/demo-styles/space.scss b/website/demo-styles/space.scss
new file mode 100644
index 0000000000..83755c20be
--- /dev/null
+++ b/website/demo-styles/space.scss
@@ -0,0 +1,12 @@
+.demo-block.demo-space {
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .button {
+    padding: 0;
+    min-height: auto;
+  }
+}
diff --git a/website/docs/en-US/card.md b/website/docs/en-US/card.md
index 510dfdc595..67009e1792 100644
--- a/website/docs/en-US/card.md
+++ b/website/docs/en-US/card.md
@@ -9,9 +9,9 @@ Card includes title, content and operations.
 ```html
 <el-card class="box-card">
   <template #header>
-    <div class="clearfix">
+    <div class="card-header">
       <span>Card name</span>
-      <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
+      <el-button class="button" type="text">Operation button</el-button>
     </div>
   </template>
   <div v-for="o in 4" :key="o" class="text item">
@@ -20,6 +20,12 @@ Card includes title, content and operations.
 </el-card>
 
 <style>
+  .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+    
   .text {
     font-size: 14px;
   }
@@ -28,15 +34,6 @@ Card includes title, content and operations.
     margin-bottom: 18px;
   }
 
-  .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: "";
-  }
-  .clearfix:after {
-    clear: both
-  }
-
   .box-card {
     width: 480px;
   }
@@ -84,7 +81,7 @@ Display richer content by adding some configs.
       <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
       <div style="padding: 14px;">
         <span>Yummy hamburger</span>
-        <div class="bottom clearfix">
+        <div class="bottom">
           <time class="time">{{ currentDate }}</time>
           <el-button type="text" class="button">Operating</el-button>
         </div>
@@ -102,27 +99,20 @@ Display richer content by adding some configs.
   .bottom {
     margin-top: 13px;
     line-height: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .button {
     padding: 0;
-    float: right;
+    min-height: auto;
   }
 
   .image {
     width: 100%;
     display: block;
   }
-
-  .clearfix:before,
-  .clearfix:after {
-      display: table;
-      content: "";
-  }
-  
-  .clearfix:after {
-      clear: both
-  }
 </style>
 
 <script>
diff --git a/website/docs/en-US/skeleton.md b/website/docs/en-US/skeleton.md
index 00c868f3d7..b5a0df1eab 100644
--- a/website/docs/en-US/skeleton.md
+++ b/website/docs/en-US/skeleton.md
@@ -104,7 +104,7 @@ When `Loading` ends, we always need to show the real UI with data to our end use
           />
           <div style="padding: 14px;">
             <span>Delicious hamberger</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">Operation button</el-button>
             </div>
@@ -173,7 +173,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
           <img :src="item.imgUrl" class="image multi-content" />
           <div style="padding: 14px;">
             <span>{{ item.name }}</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">Operation button</el-button>
             </div>
@@ -266,7 +266,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
           />
           <div style="padding: 14px;">
             <span>Delicious hamberger</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">operation button</el-button>
             </div>
@@ -316,4 +316,4 @@ export default defineComponent({
 | Name | Description |
 | ---- | ----------- |
 | default | Real rendering DOM |
-| template | Custom rendering skeleton template |
\ No newline at end of file
+| template | Custom rendering skeleton template |
diff --git a/website/docs/en-US/space.md b/website/docs/en-US/space.md
index f8fb0fd82d..5415747453 100644
--- a/website/docs/en-US/space.md
+++ b/website/docs/en-US/space.md
@@ -11,11 +11,9 @@ The basic use case is using this component to provide unified space between each
   <el-space wrap>
     <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -37,11 +35,9 @@ Using `direction` attribute to control the layout, we use `flex-direction` to im
   <el-space direction="vertical">
     <el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -75,11 +71,9 @@ You can also using customized size to override it. Refer to the next part.
   <el-space wrap :size="size">
     <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -114,11 +108,9 @@ Sometimes built-in sizes could not meet the business needs, we can use custom si
   <el-space wrap :size="size">
     <el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
diff --git a/website/docs/es/card.md b/website/docs/es/card.md
index 66cd3ed3d0..fa9f913919 100644
--- a/website/docs/es/card.md
+++ b/website/docs/es/card.md
@@ -10,9 +10,9 @@ Muestra información dentro de un contenedor `card`
 ```html
 <el-card class="box-card">
   <template #header>
-    <div class="clearfix">
+    <div class="card-header">
       <span>Card name</span>
-      <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
+      <el-button class="button" type="text">Operation button</el-button>
     </div>
   </template>
   <div v-for="o in 4" :key="o" class="text item">
@@ -21,6 +21,12 @@ Muestra información dentro de un contenedor `card`
 </el-card>
 
 <style>
+  .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+    
   .text {
     font-size: 14px;
   }
@@ -29,15 +35,6 @@ Muestra información dentro de un contenedor `card`
     margin-bottom: 18px;
   }
 
-  .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: "";
-  }
-  .clearfix:after {
-    clear: both
-  }
-
   .box-card {
     width: 480px;
   }
@@ -86,7 +83,7 @@ Muestre un contenido más rico añadiendo algunas configuraciones.
       <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
       <div style="padding: 14px;">
         <span>Yummy hamburger</span>
-        <div class="bottom clearfix">
+        <div class="bottom">
           <time class="time">{{ currentDate }}</time>
           <el-button type="text" class="button">Operating</el-button>
         </div>
@@ -104,27 +101,20 @@ Muestre un contenido más rico añadiendo algunas configuraciones.
   .bottom {
     margin-top: 13px;
     line-height: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .button {
     padding: 0;
-    float: right;
+    min-height: auto;
   }
 
   .image {
     width: 100%;
     display: block;
   }
-
-  .clearfix:before,
-  .clearfix:after {
-      display: table;
-      content: "";
-  }
-  
-  .clearfix:after {
-      clear: both
-  }
 </style>
 
 <script>
diff --git a/website/docs/es/skeleton.md b/website/docs/es/skeleton.md
index 00c868f3d7..b5a0df1eab 100644
--- a/website/docs/es/skeleton.md
+++ b/website/docs/es/skeleton.md
@@ -104,7 +104,7 @@ When `Loading` ends, we always need to show the real UI with data to our end use
           />
           <div style="padding: 14px;">
             <span>Delicious hamberger</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">Operation button</el-button>
             </div>
@@ -173,7 +173,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
           <img :src="item.imgUrl" class="image multi-content" />
           <div style="padding: 14px;">
             <span>{{ item.name }}</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">Operation button</el-button>
             </div>
@@ -266,7 +266,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
           />
           <div style="padding: 14px;">
             <span>Delicious hamberger</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">operation button</el-button>
             </div>
@@ -316,4 +316,4 @@ export default defineComponent({
 | Name | Description |
 | ---- | ----------- |
 | default | Real rendering DOM |
-| template | Custom rendering skeleton template |
\ No newline at end of file
+| template | Custom rendering skeleton template |
diff --git a/website/docs/es/space.md b/website/docs/es/space.md
index 355176e0c3..a0c54d899a 100644
--- a/website/docs/es/space.md
+++ b/website/docs/es/space.md
@@ -11,11 +11,9 @@ The basic use case is using this component to provide unified space between each
   <el-space wrap>
     <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -37,11 +35,9 @@ Using `direction` attribute to control the layout, we use `flex-direction` to im
   <el-space direction="vertical">
     <el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -75,11 +71,9 @@ You can also using customized size to override it. Refer to the next part.
   <el-space wrap :size="size">
     <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -114,11 +108,9 @@ Sometimes built-in sizes could not meet the business needs, we can use custom si
   <el-space wrap :size="size">
     <el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
diff --git a/website/docs/fr-FR/card.md b/website/docs/fr-FR/card.md
index 92a58b0309..3c253d71da 100644
--- a/website/docs/fr-FR/card.md
+++ b/website/docs/fr-FR/card.md
@@ -10,9 +10,9 @@ Le composant Card comprend un titre, un contenu et des opérations.
 ```html
 <el-card class="box-card">
   <template #header>
-    <div class="clearfix">
+    <div class="card-header">
       <span>Card name</span>
-      <el-button style="float: right; padding: 3px 0" type="text">Bouton</el-button>
+      <el-button class="button" type="text">Bouton</el-button>
     </div>
   </template>
   <div v-for="o in 4" :key="o" class="text item">
@@ -21,6 +21,12 @@ Le composant Card comprend un titre, un contenu et des opérations.
 </el-card>
 
 <style>
+  .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+    
   .text {
     font-size: 14px;
   }
@@ -29,15 +35,6 @@ Le composant Card comprend un titre, un contenu et des opérations.
     margin-bottom: 18px;
   }
 
-  .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: "";
-  }
-  .clearfix:after {
-    clear: both
-  }
-
   .box-card {
     width: 480px;
   }
@@ -85,7 +82,7 @@ Affichez un contenu plus riche grâce à la configuration.
       <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
       <div style="padding: 14px;">
         <span>Yummy hamburger</span>
-        <div class="bottom clearfix">
+        <div class="bottom">
           <time class="time">{{ currentDate }}</time>
           <el-button type="text" class="button">Operating</el-button>
         </div>
@@ -103,27 +100,20 @@ Affichez un contenu plus riche grâce à la configuration.
   .bottom {
     margin-top: 13px;
     line-height: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .button {
     padding: 0;
-    float: right;
+    min-height: auto;
   }
 
   .image {
     width: 100%;
     display: block;
   }
-
-  .clearfix:before,
-  .clearfix:after {
-      display: table;
-      content: "";
-  }
-
-  .clearfix:after {
-      clear: both
-  }
 </style>
 
 <script>
diff --git a/website/docs/fr-FR/skeleton.md b/website/docs/fr-FR/skeleton.md
index 00c868f3d7..b5a0df1eab 100644
--- a/website/docs/fr-FR/skeleton.md
+++ b/website/docs/fr-FR/skeleton.md
@@ -104,7 +104,7 @@ When `Loading` ends, we always need to show the real UI with data to our end use
           />
           <div style="padding: 14px;">
             <span>Delicious hamberger</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">Operation button</el-button>
             </div>
@@ -173,7 +173,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
           <img :src="item.imgUrl" class="image multi-content" />
           <div style="padding: 14px;">
             <span>{{ item.name }}</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">Operation button</el-button>
             </div>
@@ -266,7 +266,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
           />
           <div style="padding: 14px;">
             <span>Delicious hamberger</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">operation button</el-button>
             </div>
@@ -316,4 +316,4 @@ export default defineComponent({
 | Name | Description |
 | ---- | ----------- |
 | default | Real rendering DOM |
-| template | Custom rendering skeleton template |
\ No newline at end of file
+| template | Custom rendering skeleton template |
diff --git a/website/docs/fr-FR/space.md b/website/docs/fr-FR/space.md
index 355176e0c3..a0c54d899a 100644
--- a/website/docs/fr-FR/space.md
+++ b/website/docs/fr-FR/space.md
@@ -11,11 +11,9 @@ The basic use case is using this component to provide unified space between each
   <el-space wrap>
     <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -37,11 +35,9 @@ Using `direction` attribute to control the layout, we use `flex-direction` to im
   <el-space direction="vertical">
     <el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -75,11 +71,9 @@ You can also using customized size to override it. Refer to the next part.
   <el-space wrap :size="size">
     <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -114,11 +108,9 @@ Sometimes built-in sizes could not meet the business needs, we can use custom si
   <el-space wrap :size="size">
     <el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
diff --git a/website/docs/jp/card.md b/website/docs/jp/card.md
index 836ab83346..971413217c 100644
--- a/website/docs/jp/card.md
+++ b/website/docs/jp/card.md
@@ -9,9 +9,9 @@ cardはタイトル、内容、操作を含む。
 ```html
 <el-card class="box-card">
   <template #header>
-    <div class="clearfix">
+    <div class="card-header">
       <span>Card name</span>
-      <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
+      <el-button class="button" type="text">Operation button</el-button>
     </div>
   </template>
   <div v-for="o in 4" :key="o" class="text item">
@@ -20,6 +20,12 @@ cardはタイトル、内容、操作を含む。
 </el-card>
 
 <style>
+  .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+    
   .text {
     font-size: 14px;
   }
@@ -28,15 +34,6 @@ cardはタイトル、内容、操作を含む。
     margin-bottom: 18px;
   }
 
-  .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: "";
-  }
-  .clearfix:after {
-    clear: both
-  }
-
   .box-card {
     width: 480px;
   }
@@ -84,7 +81,7 @@ cardはタイトル、内容、操作を含む。
       <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
       <div style="padding: 14px;">
         <span>Yummy hamburger</span>
-        <div class="bottom clearfix">
+        <div class="bottom">
           <time class="time">{{ currentDate }}</time>
           <el-button type="text" class="button">Operating</el-button>
         </div>
@@ -102,27 +99,20 @@ cardはタイトル、内容、操作を含む。
   .bottom {
     margin-top: 13px;
     line-height: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .button {
     padding: 0;
-    float: right;
+    min-height: auto;
   }
 
   .image {
     width: 100%;
     display: block;
   }
-
-  .clearfix:before,
-  .clearfix:after {
-      display: table;
-      content: "";
-  }
-  
-  .clearfix:after {
-      clear: both
-  }
 </style>
 
 <script>
diff --git a/website/docs/jp/skeleton.md b/website/docs/jp/skeleton.md
index 00c868f3d7..b5a0df1eab 100644
--- a/website/docs/jp/skeleton.md
+++ b/website/docs/jp/skeleton.md
@@ -104,7 +104,7 @@ When `Loading` ends, we always need to show the real UI with data to our end use
           />
           <div style="padding: 14px;">
             <span>Delicious hamberger</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">Operation button</el-button>
             </div>
@@ -173,7 +173,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
           <img :src="item.imgUrl" class="image multi-content" />
           <div style="padding: 14px;">
             <span>{{ item.name }}</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">Operation button</el-button>
             </div>
@@ -266,7 +266,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
           />
           <div style="padding: 14px;">
             <span>Delicious hamberger</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">operation button</el-button>
             </div>
@@ -316,4 +316,4 @@ export default defineComponent({
 | Name | Description |
 | ---- | ----------- |
 | default | Real rendering DOM |
-| template | Custom rendering skeleton template |
\ No newline at end of file
+| template | Custom rendering skeleton template |
diff --git a/website/docs/jp/space.md b/website/docs/jp/space.md
index 355176e0c3..a0c54d899a 100644
--- a/website/docs/jp/space.md
+++ b/website/docs/jp/space.md
@@ -11,11 +11,9 @@ The basic use case is using this component to provide unified space between each
   <el-space wrap>
     <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -37,11 +35,9 @@ Using `direction` attribute to control the layout, we use `flex-direction` to im
   <el-space direction="vertical">
     <el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -75,11 +71,9 @@ You can also using customized size to override it. Refer to the next part.
   <el-space wrap :size="size">
     <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -114,11 +108,9 @@ Sometimes built-in sizes could not meet the business needs, we can use custom si
   <el-space wrap :size="size">
     <el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
diff --git a/website/docs/zh-CN/card.md b/website/docs/zh-CN/card.md
index d1810f9dbd..072147795f 100644
--- a/website/docs/zh-CN/card.md
+++ b/website/docs/zh-CN/card.md
@@ -10,9 +10,9 @@
 ```html
 <el-card class="box-card">
   <template #header>
-    <div class="clearfix">
+    <div class="card-header">
       <span>卡片名称</span>
-      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+      <el-button class="button" type="text">操作按钮</el-button>
     </div>
   </template>
   <div v-for="o in 4" :key="o" class="text item">
@@ -21,6 +21,12 @@
 </el-card>
 
 <style>
+  .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+    
   .text {
     font-size: 14px;
   }
@@ -29,15 +35,6 @@
     margin-bottom: 18px;
   }
 
-  .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: "";
-  }
-  .clearfix:after {
-    clear: both
-  }
-
   .box-card {
     width: 480px;
   }
@@ -85,7 +82,7 @@
       <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
       <div style="padding: 14px;">
         <span>好吃的汉堡</span>
-        <div class="bottom clearfix">
+        <div class="bottom">
           <time class="time">{{ currentDate }}</time>
           <el-button type="text" class="button">操作按钮</el-button>
         </div>
@@ -103,27 +100,20 @@
   .bottom {
     margin-top: 13px;
     line-height: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .button {
     padding: 0;
-    float: right;
+    min-height: auto;
   }
 
   .image {
     width: 100%;
     display: block;
   }
-
-  .clearfix:before,
-  .clearfix:after {
-      display: table;
-      content: "";
-  }
-  
-  .clearfix:after {
-      clear: both
-  }
 </style>
 
 <script>
diff --git a/website/docs/zh-CN/skeleton.md b/website/docs/zh-CN/skeleton.md
index b4de6f52c8..2962bd2b7d 100644
--- a/website/docs/zh-CN/skeleton.md
+++ b/website/docs/zh-CN/skeleton.md
@@ -106,7 +106,7 @@ ElementPlus 提供的排版模式有时候并不满足要求, 当您想要用自
           />
           <div style="padding: 14px;">
             <span>好吃的汉堡</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">操作按钮</el-button>
             </div>
@@ -174,7 +174,7 @@ ElementPlus 提供的排版模式有时候并不满足要求, 当您想要用自
           <img :src="item.imgUrl" class="image multi-content" />
           <div style="padding: 14px;">
             <span>{{ item.name }}</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">操作按钮</el-button>
             </div>
@@ -272,7 +272,7 @@ ElementPlus 提供的排版模式有时候并不满足要求, 当您想要用自
           />
           <div style="padding: 14px;">
             <span>好吃的汉堡</span>
-            <div class="bottom clearfix">
+            <div class="bottom card-header">
               <span class="time">{{ currentDate }}</span>
               <el-button type="text" class="button">操作按钮</el-button>
             </div>
diff --git a/website/docs/zh-CN/space.md b/website/docs/zh-CN/space.md
index 69c732fbc7..b1a83e1fae 100644
--- a/website/docs/zh-CN/space.md
+++ b/website/docs/zh-CN/space.md
@@ -11,11 +11,9 @@
   <el-space wrap>
     <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -37,11 +35,9 @@
   <el-space direction="vertical">
     <el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -75,11 +71,9 @@
   <el-space wrap :size="size">
     <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">
@@ -114,11 +108,9 @@ export default {
   <el-space wrap :size="size">
     <el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
       <template #header>
-        <div class="clearfix">
+        <div class="card-header">
           <span>Card name</span>
-          <el-button style="float: right; padding: 3px 0" type="text"
-            >Operation button</el-button
-          >
+          <el-button class="button" type="text">Operation button</el-button>
         </div>
       </template>
       <div v-for="o in 4" :key="o" class="text item">