关于清除浮动那些事儿~
一、什么是浮动？
什么是浮动呢？一般是一个子元素使用了 float 浮动属性，导致父级元素不能被撑开，这样浮动就产生了。
如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 400px; border: solid 2px red; margin: 50px auto; } .div1{ width: 150px; height: 150px; border: solid 1px black; font-size: 50px; text-align: center; line-height: 150px; } .div2{ width: 150px; height: 150px; border: solid 1px black; font-size: 50px; text-align: center; line-height: 150px; } </style> </head> <body> <div class="box"> <div class="div1">left</div> <div class="div2">right</div> </div> </body> </html>
如图1，两个元素left与right是在红色的box里的；
当我们给两个子元素设置了 float 属性后，就会变成图2的情况。
.div1{ float:left; } .div2{ float:right; }
本来两个子元素left和right是在红色盒子box内的，因为对两个子元素使用了float浮动，所以两个子元素产生了浮动，导致父级红色的box不能撑开，只剩下了边框，这样浮动就产生了。
简单的说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。
二、浮动产生的负作用
1、背景不能显示
由于浮动的产生，如果对父级设置了background属性，而父级不能被撑开，就会导致background不能显示
2、边框不能撑开
如上图中，如果父级设置了border边框属性，由于子元素使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin和padding设置值不能正确显示
由于浮动导致父元素与子元素之间设置了padding、margin属性的值不能正确显示。
三、清除浮动的方法
1、给父级元素设置高度height
<style type="text/css">
.box{
width: 400px;
border: solid 2px red;
height: 150px;
margin: 50px auto;
}
</style>
父级div手动设置了height值，就解决了父级div无法自动获取到高度的问题。
这种方法比较简单、代码少、容易掌握 ；但是也有缺点，就是这种方法只适合高度固定的布局，要给出精确的高度，如果高度不确定时，则不适合使用
2、 给浮动元素加一个兄弟元素，并对其设置clear: both属性
<div class="box"> <div class="div1">left</div> <div class="div2">right</div> <div class="div3"></div> </div>
<style type="text/css"> .div3{clear: both;} </style>
给浮动元素添加一个兄弟元素，利用css的clear:both属性清除浮动，可以让父级div自动获取到高度
这种方法的优点是简单、代码少、浏览器支持好、不容易出现怪问题 ；缺点是初学者不容易理解；而且如果页面浮动布局多，就要增加很多空div，让人感觉很不好
3、据说是目前最高大上的方法 : ) 给浮动元素的父元素增加伪元素 ::after 属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 400px; border: solid 2px red; margin: 50px auto; } .box::after{ display: block; content: ""; clear: both; } .div1{ width: 150px; height: 150px; border: solid 1px black; font-size: 50px; text-align: center; line-height: 150px; } .div2{ width: 150px; height: 150px; border: solid 1px black; font-size: 50px; text-align: center; line-height: 150px; } </style> </head> <body> <div class="box"> <div class="div1">left</div> <div class="div2">right</div> <!-- after 相当于在div2后添加了一个元素，并为其添加clear: both属性--> </div> </body> </html>
如图，得到的依然是同样的结果。这种方法清除浮动是现在最拉风的一种清除浮动，他就是利用伪元素 ::after 来在元素内部插入元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于clear在html插入一个div.clear标签， 而后者利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
4、给浮动元素的父级元素添加 overflow：hidden 属性
<style type="text/css"> .box{
width: 400px;
border: solid 2px red;
margin: 50px auto; overflow: hidden;
} </style>
这种方法必须定义宽度，同时不能定义高度，使用over：hidden浏览器自动检测浮动元素的高度。这种方法的优点是代码量少，缺点是如果子级为定位元素，而且子级宽度大于父级时，多余的内容会被隐藏
结语：清除浮动的方式虽然是有很多种，但是不是每种都适合你，也不是每种都能很好的兼容所有浏览器，所以参照你觉得最好的方式去做，个人觉得方法三不错，不需多于的标签，而且也能很好的兼容。当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！
