BFC 揭秘与应用
-
什么是 BFC
-
怎么触发 BFC
-
利用 BFC 解决一些问题
-
总结
什么是 BFC ?
BFC - Block Formatting Context 块级格式化上下文,在官方文档中,是这么介绍BFC的。
A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
强行翻译一下,简单来说,这句话的意思就是:一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素。
划重点
每一个BFC区域只包括其子元素,不包括其子元素的子元素。(这点比较容易理解)
每一个BFC区域都是独立互不影响的!(这点不太好理解,但是后续会使用代码验证)
怎么触发 BFC ?
触发 BFC 的条件:
浮动 (float: left、right)
定位 (position: absoulte、fixed)
flex grid 布局 (display: flex、grid)
overflow (overflow: hidden、auto、scroll)
inline-block (display: inline-block)
table (display: table、inline-table、table-row、table-column… 等系列)
display: flow-root (无副作用,兼容性还不够)
根元素 (body、html,整个页面就是一个大的 BFC)
划重点
满足上面任意 1 个条件,这个元素就成为 1 个 BFC
一个 BFC 区域,只包含其所有子元素,不包含子元素的子元素
每一个 BFC 区域都是独立互不影响的
利用 BFC 解决一些问题
垂直外边距重合问题
问题:两个兄弟元素之间垂直方向的 margin 是合并的
解决:各自加上 BFC 后,因为 BFC 互相独立性质,里面不会影响到外面
垂直外边距包含塌陷问题
问题:父子嵌套元素在垂直方向的 margin 结合在一起的,并取其中最大的值 50px
解决:父标签加上 BFC 后,因为 BFC 的独立性,里面不会影响到外面了
浮动元素父标签高度塌陷问题
问题:父元素未设定高度,子元素全部浮动,父元素高度为 0
解决:父元素加 BFC,将所有的浮动元素包裹起来
标准流元素被浮动元素覆盖问题
问题:红色盒子浮动,child2 绿色盒子是标准流,红色盒子覆盖了 child2 绿色盒子
解决:绿色盒子加 BFC,现在红色、绿色盒子都是 BFC,互相独立
BFC 总结
特性:只包括子元素的独立块
触发:浮动 定位 flex,inline-block overflow table
作用:
- margin 兄弟元素重叠
- margin 父子元素包含
- 子元素全浮动导致父标签高度塌陷
- 兄弟元素浮动导致覆盖
转载自:https://juejin.cn/post/7252954798357528631