<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>layout</title> <style> body{ margin:0; } header{ background-color: #36a032; height:80px; } body>div{ background-color: #854b91; } body>div>*{ /*background-color: #3815a0;*/ width:33.333%; height:840px; float:left; } #header{ height:20%; background-color: #3895a9; width:100%; } #middle{ background-color: #c9ec87; } #middle>aside{ width:50%; height:70%; float:left; } #middle>aside:first-of-type{ background-color: #58404e; } #middle>aside:last-of-type{ background-color: #ba6bce; } #clearfloat, body>div::after{ content:'.'; display:block; visibility:hidden; height:0; clear:left; } #footer{ background-color: #a895a0; height:10%; } aside{ background-color: #38e5a0; } footer{ background-color: #389520; height:60px; } </style> </head> <body> <header></header> <div> <aside id="left"></aside> <div id="middle"> <div id="header"></div> <aside></aside> <aside></aside> <div id='clearfloat'></div> <div id="footer"></div> </div> <aside id='right'></aside> </div> <footer></footer> </body> </html>
使用了两种清除浮动的技巧，其一是在包含浮动的父窗口的 after伪类元素上 做清除，另一个 因为浮动子元素的父窗口包含了其它非浮动元素，而且相对布局的相关元素之间没有间隔父容器这种情况下，使用了一个空的div,跟在 浮动元素后面做清理，以解决问题，最后所有元素均符合设计预期，结果和代码如上