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能够解决什么问题?
参考阅读