你必须懂得的css清除浮动方法,4种清除浮动方法

Nov 19, 2017 阅读(287)

标签: Css

做前端开发我们都不得不使用float浮动属性,但是如果使用了浮动,难免会遇到父级元素不能自适应高度。

假设了有三个盒子对象,一个父级里包含了两个子级,父级元素没有设置固定高度,子级一个使用了float:left(左浮动)属性,另外一个子级使用float:right(右浮动)属性,这种情况的话父级元素的高度就必定不能被子内容而撑开。

如图:

(三个盒子对象)

(设置了浮动之后,父级元素不能被撑开)

(我们所希望的效果)


这种情况在我们的工作中特别常见,我们可以通过四种方法清除浮动,

方法一:使用一个空标签

看看css属性


方法二:给父元素设置display:inline-block属性

方法三:给父元素设置overflow:auto或hidden属性

方法四:利用css伪类(比较常用,例如bootstrap框架使用的就是这种方法)

将.clearfix这个类加入到需要清除浮动的父级元素

例如<div class="cont clearfix"></div>



转自:http://www.lxyweb.com/article.php?tid=1&id=36