写在前边
一直觉得 BFC
虚无缥缈的很难理解,最近重点了解一下,有所收获,遂记录下来。
BFC是什么
定义
BFC
(block formatting context):块级格式化上下文。
约束对象
BFC
内的所有块级元素
详细内容:
- 一个块级元素占据整行空间
- 竖直方向从上到下排列
- 元素间的垂直间距由
margin
决定,相邻块级元素的垂直margin
会出现折叠。 - 计算
BFC
的高度时,浮动元素也参与计算 BFC
里的块级元素边缘不会超出BFC
边界,除非这个元素自己也变成了一个新的BFC
。
BFC怎么用
创建BFC的方式
- html根元素默认创建
BFC
float: left / right
position: relative / absolute / fixed
overflow: hidden / auto / scroll
display: inline-block / flex / inline-flex
利用BFC的场景
清除浮动
若父元素中有浮动的子元素导致高度塌陷,可以给子元素添加 overflow: hidden
,这样就可以实现外层元素包裹子元素,因为 overflow: hidden
创建了BFC,不允许孩子超出自己的边界。
margin外边距折叠
父子块级元素如果没设置边框和padding则外边距会产生折叠。这时为父元素设置BFC后会阻止父子元素外边距折叠。
子元素超出父元素
这种场景非常多见,使用 position: absolute
等方式进行偏移布局实现UI设计。