BFC布局是页面渲染的重要概念，用于解决外边距重叠、清除浮动以及阻止元素被浮动元素覆盖。通过创建BFC，可以避免这些问题并实现两列自适应布局。触发BFC的条件包括：根元素、浮动元素、绝对定位、display属性等。使用overflow: hidden等方法可创建BFC。
目录
BFC布局
BFC布局就是块级元素上下文，是页面中的一块渲染区域，有自己的规则。相当于一个独立的容器，内部元素和外部元素互相不影响。
只要元素满足下面任一条件即可触发 BFC 特性：
1.是body 根元素，如<body><div></div></body> 此时div也属于在触发了BFC布局的容器中
2.属于浮动元素：float 除 none 以外的值，left，right，inherit
3.绝对定位元素：position (absolute、fixed)
4.display 为 inline-block、table-cells、flex
5.overflow 除了 visible 以外的值 (如hidden、auto、scroll)
BFC可以用来解决外边距重叠的问题
<body>
<div&
最低0.47元/天 解锁文章
扫一扫
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
