BFC定义
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context
BFC布局规则
- 内部的Box会在垂直方向,一个接一个地放置
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
- BFC的区域不会与float box重叠
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算
左浮是子div的左边接触父div的borderbox的左边,右浮是子div接触父div的borderbox右边
因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理
BFC的生成
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block、table-cell、table-caption、table、inline-table
- overflow不为visible
BFC的应用
- 1.自适应两栏布局
<div class="div-1">
<div class="div-11"></div>
<div class="div-12"></div>
</div>
.div-1{
width:300px;
height:200px;
position: relative;
}
.div-11{
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.div-12{
height:200px;
overflow: hidden;
background:#007aff;
}
- 2.清除内部浮动
<div class="div-2">
<div class="div-21"></div>
<div class="div-21"></div>
</div>
.div-2{
border: 5px solid #fcc;
width: 300px;
overflow: hidden;
}
.div-21{
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
- 3.防止垂直 margin 重叠
<p>非bfc</p>
<div class="div-31"></div>
<div class="div-31"></div>
<p>bfc</p>
<div class="div-32"></div>
<div class="div-32"></div>
.div-31{
width:100%;
height:100px;
background:#007aff;
margin:10px;
}
.div-32{
width:100%;
height:100px;
background:#007aff;
margin:10px;
display: inline-block;
}
常见的FC有BFC、IFC,还有GFC和FFC。
IFC(Inline Formatting Contexts)直译为”内联格式化上下文”,IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)。1、水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。2、垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。
GFC(GridLayout Formatting Contexts)直译为”网格布局格式化上下文”,当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。
FFC(Flex Formatting Contexts)直译为”自适应格式化上下文”,display值为flex或者inline-flex的元素将会生成自适应容器(flex container)。1、Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素;2、vertical-align 对 Flexbox 中的子元素 是没有效果的;3、float 和 clear 属性对 Flexbox 中的子元素是没有效果的,也不会使子元素脱离文档流(但是对Flexbox 是有效果的!);4、多栏布局(column-*) 在 Flexbox 中也是失效的,就是说我们不能使用多栏布局在Flexbox 排列其下的子元素;5、Flexbox 下的子元素不会继承父级容器的宽
.wrapper-1 {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
}
.wrapper-2{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.wrapper-2 .item-1 {
grid-column-start: 1;
grid-column-end: 3;
}
.wrapper-2 .item-3 {
grid-row-start: 2;
grid-row-end: 4;
}
.wrapper-2 .item-4 {
grid-column-start: 2;
grid-column-end: 4;
}