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