Open Samgao0312 opened 2 years ago
三个问题：
BFC是什么？ BFC触发条件？ 能够用来解决什么问题？
BFC，为 Block Formatting Context 的缩写，中文翻译为 块级格式上下文。 BFC 是 Web 页面 CSS 渲染的一个机制，是块级盒子布局中产生的区域。 你可以将一个 BFC元素可以理解为一个容器、或被隔离的区间（BFC子元素不会对外界元素产生影响）、或一个完全独立的空间（布局环境），里面的元素不会影响到容器外的布局。
Block Formatting Context
如何让一个元素变成BFC，触发规则如下：
根元素，即 HTML 元素。
浮动元素。即：float: left | right （不是none）
float: left | right （不是none）
overflow 的值不为 visible 的元素。即：overflow: hidden | scroll | auto; （不是visible）
overflow: hidden | scroll | auto; （不是visible）
display: inline-block | table-cell | table-caption | flex | grid ;（ 非none 非inline 非block）
绝对定位元素: position: absolute | fiexed ;（ 非relative）
position: absolute | fiexed ;（ 非relative）
BFC能解决： margin 重合问题 margin 塌陷问题 高度塌陷问题 (让浮动元素参与BFC高度计算)。这是因为计算BFC的高度时，浮动元素也参与计算的原因。 两栏布局，一侧固定另一侧自适应。如：制作右侧自适应盒子;
BFC能解决：
三个问题：
BFC是什么？
BFC，为
Block Formatting Context的缩写，中文翻译为 块级格式上下文。 BFC 是 Web 页面 CSS 渲染的一个机制，是块级盒子布局中产生的区域。 你可以将一个 BFC元素可以理解为一个容器、或被隔离的区间（BFC子元素不会对外界元素产生影响）、或一个完全独立的空间（布局环境），里面的元素不会影响到容器外的布局。BFC触发条件？
如何让一个元素变成BFC，触发规则如下：
根元素，即 HTML 元素。
浮动元素。即：
float: left | right （不是none）overflow 的值不为 visible 的元素。即：
overflow: hidden | scroll | auto; （不是visible）display: inline-block | table-cell | table-caption | flex | grid ;（ 非none 非inline 非block）绝对定位元素:
position: absolute | fiexed ;（ 非relative）BFC能够解决什么问题？
参考阅读