<!--<!DOCTYPE html> <html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body> </html>--> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Clear float</title> <style type="text/css"> .Container{ margin: 30px auto; width:600px; height: 300px; } .p{ border:solid 3px #a33; } .c{ width: 100px; height: 100px; background-color: #060; margin: 10px; float: left; } @keyframes redLamp{ 0%{background-color: #999;} 9.9%{background-color: #999;} 10%{background-color: red;} 40%{background-color: red;} 40.1%{background-color: #999;} 100%{background-color: #999;} } @keyframes yellowLamp{ 0%{background-color: #999;} 39.9%{background-color: #999;} 40%{background-color: yellow;} 70%{background-color: yellow;} 70.1%{background-color: #999;} 100%{background-color: #999;} } @keyframes greenLamp{ 0%{background-color: #999;} 69.9%{background-color: #999;} 70%{background-color: green;} 100%{background-color: green;} } #lamp,#lamp:before,#lamp:after{ width: 100px; height: 100px; border-radius: 50%; background-color: #999; position: relative; } #lamp{ margin: 0px auto; animation: yellowLamp 10s ease infinite; } #lamp:before{ display: block; content: ''; left: -100px; animation: redLamp 10s ease infinite; } #lamp:after{ display: block; content: ''; left: 100px; top: -100px; animation: greenLamp 10s ease infinite; } .sector { width: 0; height: 0; margin: 0px auto; border-width: 50px; border-style: solid; border-color: #f00 transparent transparent; border-radius: 50px; } #floatBlockA{ background-color: yellow; } #floatBlockB{ background-color: green; overflow: hidden; } #floatBlockC{ background-color: yellow; display: table; width: 100%; } #floatBlockD{ background-color: green; } #floatBlockD:after{ content: " "; display: block; clear: both; } .floatA{ float: left; width:100px; height: 100px; background-color: red; } .floatB{ float: right; width:100px; height: 100px; background-color: red; } .floatD{ float: left; width:100px; height: 100px; background-color: red; } .clearB{ clear: both; } .container{ display: flex; margin: 30px auto; width: 100%; height: 200px; background-color: yellow; } .left{ height: 200px; flex: 1; background-color: green; } .right{ height: 200px; width: 300px; background-color: red; } .justify{ height: 200px; flex: 1; background-color: blue; } .containerA{ width: 100%; height: 200px; background-color: yellow; } .leftA{ height: 200px; width: 200px; float: right; background-color: green; } .rightA{ height: 200px; margin-right: 200px; background-color: red; } .containerB{ position: relative; width: 100%; height: 600px; } .center{ position: absolute; width: 100px; height: 100px; background-color: red; margin: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; } .containerC{ display: flex; width: 100%; height: 600px; justify-content: center; align-items: center; border-top: 1px solid #000; } .centerC{ width: 100px; height: 100px; background-color: yellow; } /** 注意不要给该容器添加 100% 属性样式**/ .box{ padding: 20px 200px; height: 300px; } /** 中间盒子 **/ .item1{ background-color: yellow; width: 100%; } /** 左边盒子 **/ .item2{ background-color: blue; width: 200px; margin-left: -100%; right: 200px; } /** 右边盒子 **/ .item3{ background-color: blue; width: 200px; margin-right: -200px; } .colums{ height: 300px; float: left; position: relative; } /** 双飞翼布局 **/ .bob{ height: 300px; } .main{ width: 100%; background-color: red; } .main-inner{ margin: 0px 200px; } .sub{ width: 200px; background-color: blue; margin-left: -100%; } .extro{ width: 200px; background-color: blue; margin-left: -200px; } .item{ float: left; height: 300px; } </style> </head> <body> <div class="Container"> <div class="p"> <div class="c"></div> <div class="c"></div> <div class="c"></div> </div> </div> <div id="lamp"></div> <div class="sector"></div> <!-- 解决div容器因为浮动导致的高度塌陷问题--> <!-- 第一种方法：添加空标签并设置属性为clear: both; 优点：通俗易懂，容易掌握 缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的 --> <div id="floatBlockA"> <div class="floatA"></div> <div class="clearB"></div> </div> <!-- 第二种方法：给父容器添加overflow: hidden属性,实质是触发了BFC 优点：不存在结构和语义化问题，代码量极少 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素； --> <div id="floatBlockB"> <div class="floatB"></div> </div> <!-- 父元素设置 display:table, 触发了BFC 优点：结构语义化正确，代码少 缺点：盒模型属性已经改变。 --> <div id="floatBlockC"> <div class="floatB"></div> </div> <!-- 使用:after伪元素,需要注意的是 :after是伪元素（Pseudo-Element），不是伪类 优点：结构和语义完全正确，代码量居中 缺点：复用方式不当会造成代码量增加 --> <div id="floatBlockD"> <div class="floatD"></div> </div> <div class="container"> <div class="left">left</div> <div class="right">right</div> <div class="justify"></div> </div> <div class="containerA"> <div class="leftA">left</div> <div class="rightA">right</div> </div> <div class="containerB"> <div class="center"></div> </div> <div class="containerC"> <div class="centerC"></div> </div> <!-- 圣杯中--> <div class="box"> <div class="item1 colums">中间盒子</div> <div class="item2 colums">左边盒子</div> <div class="item3 colums">右边盒子</div> </div> <!-- 双飞翼--> <div class="bob"> <div class="main item"> <div class="main-inner">中间盒子</div> </div> <div class="sub item">左边盒子</div> <div class="extro item">右边盒子</div> </div> </body> </html>