BFC(块级格式上下文)详解

Posted ashen1999

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BFC(块级格式上下文)详解相关的知识,希望对你有一定的参考价值。

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(块级格式上下文)详解的主要内容,如果未能解决你的问题,请参考以下文章

BFC详解

BFC 块级格式化上下文

BFC 块级格式上下文的定义创建特点和常见用途

BFC 块级格式上下文的定义创建特点和常见用途

BFC——块级格式化上下文

BFC块级格式化上下文