摘要：css清除浮动float的三种方法总结，为什么要清除浮动？浮动会有哪些影响？
一.先看现象（display：block）
分析HTML代码结构：
<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
分析CSS代码样式：
.outer{border:1px soild #ccc;background:#fcg;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}
这里没有设置在外层的div.outer设置高度，但是我们知道如果它里面的元素不浮动的化，那么这个外层的高是自动被撑开的。但是当内层元素浮动后，就出现了一下影响：
（1）背景不能显示；（2）边框不能撑开；（3）margin设置值不能正常的显示。
二.清楚css浮动
方法一：添加新的元素，应用clear：both；
HTML代码：
<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
css：
.clear{clear:both;height:0;line-height:0;font-size:0}
result:（纠正：padding不会受影响）
方法二：父级div定义overflow：auto（主义：父级div也就是这里的div.outer）
HTML：
<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;//zoom:1;是在处理兼容性问题}
原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性属性值：hidden，auto，visible。我们可以使用hidden和auto值来清除浮动，但是切记不能使用visible，如果是用这个值无法达到清除浮动效果，其他的两个值都可以。
方法三：after方法（主义：作用于浮动元素的父级）
原理：这种方法清除浮动是现在网上流行的一种清除浮动，它就是利用：after和before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear：both方法，只是区别在于：clear在html插入一个div.clear标签，而outer利用其伪类clear：after在元素内部增加一个类似于div.clear的效果。下面来看其具体的使用方法：
.outer{zoom:1;} .outer:after{clear:both;content:".";display:block;width:0;height:0;visibility:hidden;}
其中clear：both指清楚所有浮动；content：".";display:block;对于FF/chrome/opera/IE8不能缺少。其中content（）可以取值也可以为空。visibility：hidden的作用是允许浏览器渲染它，但是不显示出来，这样才能实现浮动。
总结：
清除浮动的方式有很多种，但是不是每种都适合你，也不是每种都能很好的兼容所有浏览器，所以参照你觉得最好的方式去做，个人觉得方法三不错，不需要多余的标签，而且也能很好的兼容。主义：当一个内层元素是浮动时，如果没有关闭浮动，其父级元素也就不会在包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了。
网友评论