一，为什么要清除浮动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>clearfix</title> <style> div { border-radius: 4px; margin: 5px; border: 1px solid #0084c7; } .div1 { } .div2 { width: 100px; height: 100px; float: left; } </style> </head> <body> <div class="div1"> <div class="div2"></div> </div> </bod </html>
由于div2设置了float:left使其脱离文档流，没有形成div1包裹div2的效果
二 如何清除浮动
1.解决这个bug的方法有很多，比较简单的做法如下代码，
<div class="div1"> <div class="div2"></div> <div style="clear: both;"></div> </div>
插入一个"空白"div，设置起clear：both清除浮动，clear属性的原理是为元素添加足够多的外边距，使其垂直下降到 浮动框的下面。但是这中做法的缺点就是添加了无用的标签，使html不能符合语义规范。
2.当前流行的一个做法是利用伪类：before和：after，代码如下，
.clearfix { zoom: 1; } .clearfix:after, .clearfix:before { content: ""; display: block; clear: both; } <div class="div1 clearfix"> <div class="div2"></div> </div>
添加消除浮动的类.clearfix后能正常显示div。注，zoom：1是兼容IE7。
3.还有一种方法是给外层父级div设置属性overflow：hidden。
.div1 {
/*background-color: #398439;*/
300px;
overflow: hidden;
}
.div2 {
100px;
height: 100px;
/*background-color: #003366;*/
float: left;
clear: left;
}
三，关于clear的另一个用途：实现垂直布局
要实现如图所示的布局，左侧的2个div浮动到父级div左侧
可以利用左侧第二个div的clear：left来实现，这样，内部div和文字就是同意级别，而不用将左侧的2个div包裹起来。