diff --git a/.dumi/global.css b/.dumi/global.css
new file mode 100644
index 0000000000..8a14f9a69a
--- /dev/null
+++ b/.dumi/global.css
@@ -0,0 +1,13 @@
+.demo-logo {
+  width: 120px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+}
+
+.demo-logo-vertical {
+  height: 32px;
+  margin: 16px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+}
diff --git a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
index 113e48fb6f..0eeb0cef75 100644
--- a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -169,7 +169,7 @@ exports[`renders components/layout/demo/custom-trigger.tsx extend context correc
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -432,10 +432,10 @@ exports[`renders components/layout/demo/fixed.tsx extend context correctly 1`] =
 >
   <header
     class="ant-layout-header"
-    style="position: sticky; top: 0px; z-index: 1; width: 100%;"
+    style="position: sticky; top: 0px; z-index: 1; width: 100%; display: flex; align-items: center;"
   >
     <div
-      style="float: left; width: 120px; height: 31px; margin: 16px 24px 16px 0px; background: rgba(255, 255, 255, 0.2);"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -712,7 +712,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
       class="ant-layout-sider-children"
     >
       <div
-        style="height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.2);"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1498,7 +1498,7 @@ exports[`renders components/layout/demo/responsive.tsx extend context correctly
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
@@ -1857,7 +1857,7 @@ exports[`renders components/layout/demo/side.tsx extend context correctly 1`] =
       class="ant-layout-sider-children"
     >
       <div
-        style="height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.2);"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -2445,7 +2445,7 @@ exports[`renders components/layout/demo/side.tsx extend context correctly 1`] =
     </div>
   </aside>
   <section
-    class="ant-layout site-layout"
+    class="ant-layout"
   >
     <header
       class="ant-layout-header"
@@ -2504,9 +2504,10 @@ exports[`renders components/layout/demo/top.tsx extend context correctly 1`] = `
 >
   <header
     class="ant-layout-header"
+    style="display: flex; align-items: center;"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -3329,10 +3330,11 @@ exports[`renders components/layout/demo/top-side.tsx extend context correctly 1`
   class="ant-layout"
 >
   <header
-    class="ant-layout-header header"
+    class="ant-layout-header"
+    style="display: flex; align-items: center;"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -4492,10 +4494,11 @@ exports[`renders components/layout/demo/top-side-2.tsx extend context correctly
   class="ant-layout"
 >
   <header
-    class="ant-layout-header header"
+    class="ant-layout-header"
+    style="display: flex; align-items: center;"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
diff --git a/components/layout/__tests__/__snapshots__/demo.test.ts.snap b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
index 378eb6724e..3b3b3b203f 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
@@ -169,7 +169,7 @@ exports[`renders components/layout/demo/custom-trigger.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -326,10 +326,10 @@ exports[`renders components/layout/demo/fixed.tsx correctly 1`] = `
 >
   <header
     class="ant-layout-header"
-    style="position:sticky;top:0;z-index:1;width:100%"
+    style="position:sticky;top:0;z-index:1;width:100%;display:flex;align-items:center"
   >
     <div
-      style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -487,7 +487,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -992,7 +992,7 @@ exports[`renders components/layout/demo/responsive.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1171,7 +1171,7 @@ exports[`renders components/layout/demo/side.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1386,7 +1386,7 @@ exports[`renders components/layout/demo/side.tsx correctly 1`] = `
     </div>
   </aside>
   <section
-    class="ant-layout site-layout"
+    class="ant-layout"
   >
     <header
       class="ant-layout-header"
@@ -1445,9 +1445,10 @@ exports[`renders components/layout/demo/top.tsx correctly 1`] = `
 >
   <header
     class="ant-layout-header"
+    style="display:flex;align-items:center"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -1743,10 +1744,11 @@ exports[`renders components/layout/demo/top-side.tsx correctly 1`] = `
   class="ant-layout"
 >
   <header
-    class="ant-layout-header header"
+    class="ant-layout-header"
+    style="display:flex;align-items:center"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -2101,10 +2103,11 @@ exports[`renders components/layout/demo/top-side-2.tsx correctly 1`] = `
   class="ant-layout"
 >
   <header
-    class="ant-layout-header header"
+    class="ant-layout-header"
+    style="display:flex;align-items:center"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
diff --git a/components/layout/demo/custom-trigger-debug.tsx b/components/layout/demo/custom-trigger-debug.tsx
index cb5ae9f76b..8f92d9307d 100644
--- a/components/layout/demo/custom-trigger-debug.tsx
+++ b/components/layout/demo/custom-trigger-debug.tsx
@@ -73,7 +73,7 @@ const App: React.FC = () => {
   return (
     <Layout>
       <Sider trigger={null} collapsible collapsed={collapsed}>
-        <div className="logo" />
+        <div className="demo-logo-vertical" />
         <Menu
           theme="dark"
           mode="inline"
diff --git a/components/layout/demo/custom-trigger.tsx b/components/layout/demo/custom-trigger.tsx
index 8f9e0b17d4..faf5918ee1 100644
--- a/components/layout/demo/custom-trigger.tsx
+++ b/components/layout/demo/custom-trigger.tsx
@@ -19,7 +19,7 @@ const App: React.FC = () => {
   return (
     <Layout>
       <Sider trigger={null} collapsible collapsed={collapsed}>
-        <div className="logo" />
+        <div className="demo-logo-vertical" />
         <Menu
           theme="dark"
           mode="inline"
diff --git a/components/layout/demo/fixed-sider.tsx b/components/layout/demo/fixed-sider.tsx
index ff00a64ebb..96d2840b22 100644
--- a/components/layout/demo/fixed-sider.tsx
+++ b/components/layout/demo/fixed-sider.tsx
@@ -46,7 +46,7 @@ const App: React.FC = () => {
           bottom: 0,
         }}
       >
-        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
+        <div className="demo-logo-vertical" />
         <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
       </Sider>
       <Layout className="site-layout" style={{ marginLeft: 200 }}>
diff --git a/components/layout/demo/fixed.tsx b/components/layout/demo/fixed.tsx
index b3cbe0d505..204408643c 100644
--- a/components/layout/demo/fixed.tsx
+++ b/components/layout/demo/fixed.tsx
@@ -10,16 +10,17 @@ const App: React.FC = () => {
 
   return (
     <Layout>
-      <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
-        <div
-          style={{
-            float: 'left',
-            width: 120,
-            height: 31,
-            margin: '16px 24px 16px 0',
-            background: 'rgba(255, 255, 255, 0.2)',
-          }}
-        />
+      <Header
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 1,
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <div className="demo-logo" />
         <Menu
           theme="dark"
           mode="horizontal"
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index ee8ecb0d81..ec291399e6 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -9,11 +9,3 @@ Layout.Sider 支持响应式布局。
 Layout.Sider supports responsive layout.
 
 > Note: You can get a responsive layout by setting `breakpoint`, the Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. And a special trigger will appear if the `collapsedWidth` is set to 0.
-
-```css
-#components-layout-demo-responsive .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-```
diff --git a/components/layout/demo/responsive.tsx b/components/layout/demo/responsive.tsx
index 9de14fcc0c..ed6bde07d6 100644
--- a/components/layout/demo/responsive.tsx
+++ b/components/layout/demo/responsive.tsx
@@ -21,7 +21,7 @@ const App: React.FC = () => {
           console.log(collapsed, type);
         }}
       >
-        <div className="logo" />
+        <div className="demo-logo-vertical" />
         <Menu
           theme="dark"
           mode="inline"
diff --git a/components/layout/demo/side.tsx b/components/layout/demo/side.tsx
index 6ab04e4b04..8284f51c91 100644
--- a/components/layout/demo/side.tsx
+++ b/components/layout/demo/side.tsx
@@ -48,10 +48,10 @@ const App: React.FC = () => {
   return (
     <Layout style={{ minHeight: '100vh' }}>
       <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
-        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
+        <div className="demo-logo-vertical" />
         <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
       </Sider>
-      <Layout className="site-layout">
+      <Layout>
         <Header style={{ padding: 0, background: colorBgContainer }} />
         <Content style={{ margin: '0 16px' }}>
           <Breadcrumb style={{ margin: '16px 0' }}>
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index 638204f3b1..362655ffe1 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -5,18 +5,3 @@
 ## en-US
 
 Both the top navigation and the sidebar, commonly used in application site.
-
-```css
-#components-layout-demo-top-side-2 .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.ant-row-rtl #components-layout-demo-top-side-2 .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-}
-```
diff --git a/components/layout/demo/top-side-2.tsx b/components/layout/demo/top-side-2.tsx
index 211633611f..edabc82da5 100644
--- a/components/layout/demo/top-side-2.tsx
+++ b/components/layout/demo/top-side-2.tsx
@@ -37,8 +37,8 @@ const App: React.FC = () => {
 
   return (
     <Layout>
-      <Header className="header">
-        <div className="logo" />
+      <Header style={{ display: 'flex', alignItems: 'center' }}>
+        <div className="demo-logo" />
         <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
       </Header>
       <Layout>
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 7c3d0e5900..62aa7646d7 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -5,18 +5,3 @@
 ## en-US
 
 Both the top navigation and the sidebar, commonly used in documentation site.
-
-```css
-#components-layout-demo-top-side .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.ant-row-rtl #components-layout-demo-top-side .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-}
-```
diff --git a/components/layout/demo/top-side.tsx b/components/layout/demo/top-side.tsx
index 313945b4e0..ebe23d9f86 100644
--- a/components/layout/demo/top-side.tsx
+++ b/components/layout/demo/top-side.tsx
@@ -37,8 +37,8 @@ const App: React.FC = () => {
 
   return (
     <Layout>
-      <Header className="header">
-        <div className="logo" />
+      <Header style={{ display: 'flex', alignItems: 'center' }}>
+        <div className="demo-logo" />
         <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
       </Header>
       <Content style={{ padding: '0 50px' }}>
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index b5ffbe9e79..e00df591e5 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -11,21 +11,3 @@ The most basic "header-content-footer" layout.
 Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it. We always put contents in a fixed size navigation (eg: `1200px`), the layout of the whole page is stable, it's not affected by viewing area.
 
 Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links.
-
-```css
-.site-layout-content {
-  min-height: 280px;
-  padding: 24px;
-}
-#components-layout-demo-top .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-.ant-row-rtl #components-layout-demo-top .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-}
-```
diff --git a/components/layout/demo/top.tsx b/components/layout/demo/top.tsx
index 8e7b61ac14..b3c347bfdd 100644
--- a/components/layout/demo/top.tsx
+++ b/components/layout/demo/top.tsx
@@ -10,8 +10,8 @@ const App: React.FC = () => {
 
   return (
     <Layout className="layout">
-      <Header>
-        <div className="logo" />
+      <Header style={{ display: 'flex', alignItems: 'center' }}>
+        <div className="demo-logo" />
         <Menu
           theme="dark"
           mode="horizontal"
diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index 229e501488..0722ccefc4 100644
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -61,8 +61,8 @@ Style of a navigation should conform to its level.
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Basic Structure</code>
 <code src="./demo/top.tsx" compact background="grey">Header-Content-Footer</code>
-<code src="./demo/top-side-2.tsx" compact background="grey">Header Sider 2</code>
 <code src="./demo/top-side.tsx" compact background="grey">Header-Sider</code>
+<code src="./demo/top-side-2.tsx" compact background="grey">Header Sider 2</code>
 <code src="./demo/side.tsx" iframe="360">Sider</code>
 <code src="./demo/custom-trigger.tsx" compact background="grey">Custom trigger</code>
 <code src="./demo/responsive.tsx" compact background="grey">Responsive</code>
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index 9fa103d4e3..ffadad81a6 100644
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -62,8 +62,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">基本结构</code>
 <code src="./demo/top.tsx" compact background="grey">上中下布局</code>
-<code src="./demo/top-side-2.tsx" compact background="grey">顶部-侧边布局-通栏</code>
 <code src="./demo/top-side.tsx" compact background="grey">顶部-侧边布局</code>
+<code src="./demo/top-side-2.tsx" compact background="grey">顶部-侧边布局-通栏</code>
 <code src="./demo/side.tsx" iframe="360">侧边布局</code>
 <code src="./demo/custom-trigger.tsx" compact background="grey">自定义触发器</code>
 <code src="./demo/responsive.tsx" compact background="grey">响应式布局</code>
diff --git a/components/menu/__tests__/index.test.tsx b/components/menu/__tests__/index.test.tsx
index 79929f1205..c1158d87c7 100644
--- a/components/menu/__tests__/index.test.tsx
+++ b/components/menu/__tests__/index.test.tsx
@@ -703,7 +703,7 @@ describe('Menu', () => {
             collapsed={collapsed}
             onCollapse={() => setCollapsed(!collapsed)}
           >
-            <div className="logo" />
+            <div className="demo-logo" />
             <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
               <SubMenu key="sub1" icon={<UserOutlined />} title="User">
                 <Menu.Item key="3">Tom</Menu.Item>