CSS之清除浮动

三个浮动的元素

<style type="text/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;}
</style>
<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

有浮动.png

当外层DIV.outer 没有设置高度，如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，边框就不能被撑开，影响了布局，这种现象叫做浮动溢出。

这时需要清除浮动来达到理想效果：

清除浮动后的效果.png

清除浮动的几种方法：

1.clear:both

//div3后面新加一个div
<div class="clear"></div>
//css
.clear{clear:both; height: 0}

• 简单，浏览器兼容性好。
• 需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

2.父级div添加overflow属性

//给父级div outer设置属性
<div class="outer over-flow"> //这里添加了一个class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>
//css
.over-flow{ overflow: auto; zoom: 1} 

overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hidden和auto值来清除浮动，但不能使用visible值。

zoom:1是IE浏览器的专有属性，Firefox等浏览器不支持。zoom:1设置缩放比例为1，是为了兼容IE，一般和overflow一起用于清除浮动

3.父级div加:after方法

:after代表伪元素（不是伪类），是一个元素之后最近的元素。
利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用clear:after在元素内部增加一个类似于div.clear的效果。

.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}

• 相比增加一个空的div，:after方法文档结构更加清晰

4.给父级div也加上浮动

• 会使其整体浮动，有时候会影响布局，不推荐使用。