块格式化上下文BFC

作者: 左手气球右手书 | 来源:发表于2019-02-20 15:55 被阅读13次

CSS知识点----BFC
BFC / IFC
BFC和IFC
BFC和IFC
css-BFC
BEM 和 BFC
BFC
CSS清除浮动的方法
CSS中的BFC及其作用
css

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。（格式上下文、决定文档如何渲染）
IFC（Inline Formatting Context）

BFC布局规则：

生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

分解如下：

内部的Box会在垂直方向，一个接一个地排列；
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC的区域不会与float box重叠；（可用于形成自适应的两栏布局，一列宽度固定，另一列自适应；或多栏布局）

image.png

html:

<div class="tit">利用BFC形成两栏自适应布局</div>
<div class="pt1">
  <div class="left">width:200px;<br> float:left;<br> height:200px; <br>background:#ccf;</div> 
  <div class="right">height:300px; <br>background:#cfc;</div> 
</div> 

<div class="pt1"> 
  <div class="left">width:200px;<br> float:left;<br> height:200px; <br>background:#ccf;</div> 
  <div class="right bfc">height:300px; <br>background:#cfc;<br><span class="hl">overflow:hidden;</span></div> 
</div>

css:

.pt1{height:300px; background:#ffc; width:500px; margin:20px 0;}/*小黄*/
.pt1 .left{width:200px; float:left; height:200px; background:#ccf;}/*小紫*/ 
.pt1 .right{height:300px; background:#cfc;}/*小绿*/
.bfc{overflow:hidden;} 
.hl{color:red; font-weight:bold; font-size:18px;}

多栏布局同理。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此;
计算BFC的高度时，浮动元素也参与计算（可用于清除浮动、避免文字环绕）

image.png

html:

<div class="tit">利用BFC清除浮动</div> 
<div class="pt2"> 
  <div class="left">float:left;</div> 
  <div class="right">float:right;</div>
</div> 

<div class="pt2 bfc"><p class="hl">overflow:hidden;</p> 
  <div class="left">float:left;</div> 
  <div class="right">float:right;</div>
</div>

css:

.pt2{width:500px; margin:20px 0; border:10px solid red;} 
.pt2 .left{width:200px; float:left; height:100px; background:#ccf;} 
.pt2 .right{width:300px;float:right; height:100px; background:#cfc;} 
.bfc{overflow:hidden;} 
.hl{color:red; font-weight:bold; font-size:18px;}

同理可用于清除文字环绕。

创建BFC：

根元素或包含根元素的元素（body）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。