本文介绍了BFC（Block Formatting Contexts）的概念及其触发条件，并详细解析了BFC的主要特性，如避免外边距重叠、清除浮动及阻止元素被浮动元素覆盖等。
1.常见的定位方案
在说BFC之前，先了解一下常见的定位方案。
（1）普通流
- 元素按照在html中的先后位置至上而下的布局
- 行内元素水平排列，直到当行被占满然后换行，块级元素会在新的一行显示
- 所有元素都是默认普通流定位
（2）浮动
- 元素首先按照普通流的位置出现，然后根据浮动的方向的范围向左或右偏移
（3）绝对定位
- 元素会整体脱离普通流，不会对同级元素造成影响
2.BFC概念
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于定位方案中的的普通流。当元素具有BFC属性时，可以看做是隔离了的独立容器，容器中的元素不会在布局上影响到外面的元素。
3.如何触发BFC
如果元素中有以下任意一个属性，即会触发BFC。
- 根元素<html>
- 浮动元素（元素的float不是none）
- 绝对定位元素（元素的position为absolute或flxed）
- display为inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex、inline-flex、grid、inline-grid时
- overflow值不为visible的块元素时
- contain值为layout、content、paint的元素
- 多列容器（元素的column-count或column-width不为auto，包括column-count为1）
4.BFC的特性
- 避免外边距重叠（通常用overflow:hidden触发）
- 清除浮动
- 阻止元素被浮动元素覆盖
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
