关于BFC的理解

最新推荐文章于 2024-10-31 22:09:22 发布

原创最新推荐文章于 2024-10-31 22:09:22 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

BFC是什么

直接翻译为
格式化上下文：创建一个盒子，盒子内部元素布局不影响盒子外部元素

BFC触发条件：

html元素时一个BFC盒子
float不为none的浮动元素
position为absolute和fixed的元素
display为inline-block ；table-cell ；flex；inline-flex
overflow除了visible元素

BFC的布局规则：

bfc内部盒子在垂直方向上依次放置，
盒子垂直方向上的间距由margin决定，同一个bfc下的盒子的margin会发生重叠
内部每个盒子的margin-left会触碰到容器的border-left，浮动盒子也是这样
Bfc区域不会和浮动元素重叠
计算bfc高度时，浮动元素会参与计算
Bfc里面的子元素不会影响到外面的元素

BFC应用：

解决浮动塌陷问题

塌陷的原因：父元素中只有浮动元素且父元素未设置高度和宽度时，由于浮动元素脱离文档流，所以父元素没有内容，高和坍塌为0
解决方法：
1.为父元素创建bfc overflow ：hidden（由于ie6以下没有BFC，可以设置zoom：1）
2.父元素设置一个伪类:after,通过clear:both清除浮动元素带来的影响
解决同一个bfc下盒子的margin重叠问题：
重叠原因：父元素中子元素的margin-top比父盒子的还要大。由于都属于html跟元素下的bfc，所以在垂直方向会发生重叠，取最大值
解决方法：将盒子都设成bfc盒子（1.将父元素设置为bfc overflow：hidden。2.添加会导致bfc的display。3.父元素加padding或border）

其实我们的布局中特别是浮动的布局就是在使用bfc规则，只是我们一般不这样说，比如我们的伪类去浮动，最明显的是刚刚的overflow：hidden，其实是一种强制去浮动的方法（溢出隐藏）

其他格式化上下文

IFC 行内格式化上下文

IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin影响)
IFC 中的 line box 一般左右都贴紧整个IFC，但是会因为float元素而扰乱。 float元素会位于IFC与与line box之间，使得line box 宽度缩短。同个ifc下的多个line box高度会不同。 IFC中是不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生IFC，通过 text-align 则可以使其水平居中。
垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其verticalalign:middle，其他行内元素则可以在此父元素下垂直居中。

GFC 网格布局格式化上下文

GridLayout Formatting Contexts，当为一个元素设置 display 值为 grid 的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器上定义网格定义行和网格定义列属性在网格项目上定义网格行和网格列为每一个网格项目定义位置和空间。
那么GFC有什么用呢，和 table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC 自适应格式化上下文

Flex Formatting Contexts， display值为 flex 或者 inline-flex 的元素将会生成自适应容器，多用于移动端。
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说， Flexbox 定义了伸缩容器内伸缩项目该如何布局。