理解 四种清除浮动的方法

用 clear 样式,对指定元素进行清除浮动操作:

<div class="divclear"></div>

.divclear {
  clear: both;  // both这个属性是两侧清除,还有左边或右边(left, right)
}

这是简单的对指定元素进行清除浮动操作,这样的清除浮动,只关心指定元素,使该元素的两侧不出现其他浮动。并不关心其他类似“父盒子高度支撑”的问题。

父元素结束标签之前插入一个清除浮动的块级元素:


<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
    <div class="blankDiv"></div>
</div>

.blankDiv {
    clear: both;
}

这样的处理等于,是给父元素的结束标签之前增加了一个“块级元素”,然后给这个“块级元素”赋予clear的属性,帮助父盒子清除浮动,并且支撑起来了父盒子的高度。

利用添加伪元素清除浮动:

<div class="divclear clearfix"></div>
  display: block;
  clear: both;
  height: 0;
}

这个方法其实类似于第二个给父元素结束标签前增加“块级元素”,都是利用新增块级元素的方式去清除浮动,并且支撑父盒子高度。

利用 overflow 清除浮动:

当元素设置了overflow样式,且值不为visible时,该元素就建构了一个BFC(块级格式化上下文),所谓BFC有个特点,就是BFC的高度是要包含浮动元素的,
所以,给父元素设置了 overflow:auto 的属性后,该父元素的高度就被撑起来了。

 

posted @ 2020-08-26 19:14  PANIC404  阅读(156)  评论(0编辑  收藏  举报