CSS_BFC布局

一.BFC是什么？

在解释 BFC 是什么之前，需要先介绍 Box、Formatting（格式化） Context（上下文）==块级格式化上下文 的概念。 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

二.BFC布局规则

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
• 计算BFC的高度时，浮动元素也参与计算

三.BFC触发条件

• 根元素 HTML
• float属性为left或right
• position属性为absolute或fixed
• display属性为inline-block、flex、table-cell、table-caption、 inline-flex
• overflow属性为auto、hidden 、scroll

不可继承的：display、margin、border、padding、background、height、min-height、max- height、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

---

所有元素可继承：visibility和cursor。

---

内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。

---

块状元素可继承：text-indent和text-align

---

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

---

表格元素可继承：border-collapse