关于清除浮动那些事儿~

一、什么是浮动？

　　什么是浮动呢？一般是一个子元素使用了 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浏览器自动检测浮动元素的高度。这种方法的优点是代码量少，缺点是如果子级为定位元素，而且子级宽度大于父级时，多余的内容会被隐藏

　　　　结语：清除浮动的方式虽然是有很多种，但是不是每种都适合你，也不是每种都能很好的兼容所有浏览器，所以参照你觉得最好的方式去做，个人觉得方法三不错，不需多于的标签，而且也能很好的兼容。当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！

转载于:https://www.cnblogs.com/mysun-shine/p/6293473.html