fe-notes
fe-notes copied to clipboard
CSS 之 BFC
布局
页面布局分为流式布局、浮动布局和绝对定位布局三种,而 BFC 属于流式布局。
概念
Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
触发 BFC
- body 根元素(自身属于流式布局)
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC 应用场景
- 解决外边距塌陷问题
- 解决浮动元素覆盖其它元素问题