1.定义
BFC(Block formatting context)即"块级格式化上下文"。它是一个独⽴的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部无关。
block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
2.BFC布局的规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发⽣生重叠。
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页⾯上的一个隔离的独立容器,容器⾥面的⼦子元素不会影响到外面的元素,外面的元素也同样不会影响到容器里面的元素。
- 计算BFC的高度时,浮动元素也参与计算。
3.如何生成BFC?
- 根元素;
- float属性不为none;
- position为absolute或fixed;
- display为inline-block, table-cell, table-caption, flex, inline-flex;
- overflow不为visible.
4.BFC的作用
- 清除内部浮动,防止父元素塌陷
.wrap{ /*overflow: hidden;*/如果不在wrap生成一个BFC,内部div浮动,其父div的高度就会塌陷. 300px; border:1px solid red; } .inner{ float:left; 100px; height:100px; background-color: blue; } .outer{ 120px; height:150px; background-color: green; } <div class="wrap"> <div class="inner">inner</div> </div> <div class="outer">outer</div>
- 防止垂直方向margin 重叠
.wrap{ 300px; border:1px solid red; } .top{ 100px; height:100px; background-color: blue; margin-bottom: 100px; } .bottom{ margin-top: 100px; 100px; height:100px; background-color: green; } <div class="top">top</div> <div class="bottom">bottom</div>
上面两个div的垂直间距在页面上其实只有100px;这是因为它们同处在根元素的BFC中,同一个BFC的两个相邻Box的margin会发生重叠(具体多少,从两个margin的值中取大值).解决方式的话就是让它们处于不同的BFC中,可以在其中一个div外面套一个div,外面的div设置overflow:hidden;
.wrap{ overflow: hidden; 300px; border:1px solid red; } .top{ 100px; height:100px; background-color: blue; margin-bottom: 100px; } .bottom{ margin-top: 100px; 100px; height:100px; background-color: green; } <div class="wrap"> <div class="top">top</div> </div> <div class="bottom">bottom</div>
总之,BFC就是一个独立的容器,它里面的元素和外面的元素互不影响.