CSS—BFC学习

什么是BFC(Block formatting context)

BFC(Block formatting context),翻译过来为“块级格式化上下文”。

其实BFC就是一个独立的渲染区域,只有块级盒子参与,规定了内部的块级盒子如何布局,并且与这个区域外部没半毛钱关系。

哪些元素具有BFC条件

不是所有的元素都能产生BFC,W3C规定

display属性为block, list-item , table的元素,会产生BFC

什么样的情况可以产生BFC

要给元素添加下列属性就可以产生BFC:

float属性不为none。

position为absolute或fixed。

display为inline-block, table-cell , table-caption , flex , inline-flex。

overflow不为visible。

BFC元素具有的特性

BFC布局特性:

1,盒子从顶端开始垂直地一个接一个地排列。

2,盒子垂直方向的距离由margin决定。属于同一个BFC的相邻两个盒子的margin会发生重叠,会选择其最大的。

3,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)。

4,BFC区域不会与浮动的盒子产生交集,而是紧贴浮动边缘。

5,计算BFC高度时,自然也会检测浮动的盒子高度。

BFC的用途

1,清除浮动

只要把父元素设为BFC就可以清理子元素的浮动了,最常见的做法就是在父元素上设置overflow:hidden;样式。

2,解决外边距合并问题

只要加一个Div将其中一个盒子隔离为具有BFC特性就可以避免外边距合并问题

3,制作右侧自适应的盒子问题

BFC区域不会与浮动的盒子产生交集,而是紧贴浮动边缘

posted @ 2018-09-09 15:26  沉浮乡土  阅读(145)  评论(0编辑  收藏  举报