BFC

BFC

概念：

BFC（Block Formatting Context） 块级格式化上下文。它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

触发条件

• 根元素或者其它包含它的元素
• 浮动元素（float不是none）
• 绝对定位元素（position为absolute或fixed）
• 内联块（display:inline-block）
• 表格单元格（display:table-cell,HTML表格单元默认属性）
• 表格标题（display:table-caption,HTML表格标题默认属性）
• 具有overflow且值不是visible的块元素
• display:flow-root

特性

• 内部box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
• 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
• 形成了BFC的区域不会与float box重叠
• 计算BFC高度时，浮动元素也参与计算

应用

1. 当子元素浮动，父元素包不住子元素时

可以将父元素也变为BFC，通过将父元素的也变为浮动、绝对定位、内联块等方法。实现父元素包含子元素。

2 设计float+div，左图右文之类的效果

整理：

https://www.jianshu.com/p/d94c6b679739
https://muyiy.cn/question/css/39.html