清除浮动

为何清除浮动>子元素设置了float时候，子元素会脱离文档流，同时子元素会变成块级元素；造成的后果就是父级元素高度坍塌，所有需要清除浮动

html

<div class="outer"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div></div>

css

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}.
div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

没有给父元素设置高度，子元素float，出现父级元素没有撑开。

clear:both

创建第4个子元素，设置高为0，clear:both

//html
<div class="outer"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="clear"></div></div>
//css
.clear{clear:both;height:0;line-height:0;font-size:0;}

使用空标签清除浮动，更有用

<br style="clear:both;">

overflow:hidden/auto

这个属性加给父级

<div class="outer over-flow"> //这里添加了一个class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--<div class="clear"></div>-->
</div>
//css
over-flow{overflow:auto;zoom:1;}
//overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决,注意，zoom不符合W3C标准。

:after

该方法兼容高

//css
outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.clearfix:after {content:'';display:block;clear:both;visibility:hidden;zoom:1;}
//html
<div class="outer clearfix "> //这里添加了一个class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>