BFC（块级格式上下文）详解

标签：过多   ble   static   stat   play   超过   条件   over   position   

BFC实际上是形成一个独立的区域，与外界元素互不影响。

触发BFC的条件可以有：

1. overflow不为visible

2. float不为none

3. position不为static或relative

4. display为table-cell、flex、inline-block、inline-flex

BFC能解决的问题：

浮动元素造成父元素高度塌陷

其他解决方式：为父元素设置浮动；为父元素设置高度；在最后一个浮动元素后添加空元素，并设置clear:both；为最后一个元素添加伪元素::after，并设置clear:both.

相邻div垂直方向的margin塌陷

其他解决方式：设置margin为padding

两栏自适应

在标准流中，块级元素会默认填满一行。所以设置左边元素浮动定宽，就可以实现两栏自适应。但是如果右边元素中的文本过多，使其高度超过了左边元素，就会造成文本环绕效果。所以使用BFC就可以让右边元素形成一块独立的区域。

其他解决方式：

设置左边元素浮动定宽，右边元素margin-left为左边元素的宽度；设置左边元素position:absolute且定宽，右边元素margin-left为左边元素的宽度；设置左边元素position:absolute且定宽，右边元素position:absolute，left为左边元素宽度，宽度为100%

BFC（块级格式上下文）详解

标签：过多   ble   static   stat   play   超过   条件   over   position   

原文地址：https://www.cnblogs.com/ashen1999/p/12925745.html