首页手记 BFC(块级格式化上下文)

BFC(块级格式化上下文)

标签：

Html/CSS

BFC(Block formatting context)
直译为“块级格式化上下文”
BFC它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。

那些元素会具有BFC的条件？
不是所有的元素，模式都能产生BFC ,w3c规范：
display属性为block, list-item ,table的元素，会产生BFC。也就是块元素

什么情况下可以让元素产生BFC
要给这些元素添加如下属性就可以触发BFC
-float 属性不为none
-position为absolute或flex
-display为inline-block,table-cell,table-caption,flex,inline-flex
-overflow不为visible

BFC元素所具有的特性
BFC布局规则特性：
1.在BFC中，盒子从顶部开始垂直地一个接一个的排列
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中，每一个盒子的左外边距（margin-left），会触碰到容器的左边缘（border-left）
4.BFC的区域不会与浮动的盒子产生交集，且是紧贴浮动的边缘
5.计算BFC的高度时，自然也会检测到浮动的盒子高度

BFC的用途
BFC能用来做什么？
1.清除元素内部浮动
只要把父元素设为BFC就可以清除子元素的浮动了，最常见的就是在父元素上设置overflow：hideen样式
计算BFC的高度时，自然也会检测到浮动

的盒子高度

<!doctype html><html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>test</title><style>.fa{width:300px;border:1px solid red;/*不给高度 父元素会自动撑开*/}.one{width:100px;height:100px;background-color:red;
}.two{width:100px;height:100px;background-color:yellowgreen;
}</style>
 </head>
 <body>
  <div class="fa">
  
   <div class="one"> 1</div>
   <div class="two"> 2</div>
   
  </div></body></html>

标准流

如果两个盒子同时添加左浮动，元素浮动之后就会不占据位置，父元素高度就会为零。

子元素浮动后

给父元素创建BFC，添加overflow：hideen样式

给父元素创建BFC后

2.解决外边距合并问题
盒子垂直方向的距离有margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠。
那么我们创建不属于同一个BFC，就不会margin重叠了。
为上述代码添加

.one{margin-bottom:50px;}.two{margin-top:100px;}/*应该实现两个盒子间距150px*/

两个盒子margin值为100px

可见margin值合并了
将div one用另一个新的div over来包裹，不设置宽高，只添加如下代码.over{overflow:hidden;}
这样子两个div之间的margin值就是150px

3.制作右侧自适应
BFC的区域不会与浮动元素产生任何交集，顺着浮动边缘形成自己的封闭上下文

<!doctype html><html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>test</title><style>*{padding:0;margin:0;}.fa{width:300px;border:1px solid red;
}.one{width:100px;height:100px;background-color:red;
}.two{height:300px;background-color:pink;
} 
</style>
 </head>
 <body>
  <div class="fa">
      
        <div class="one"> 1</div>
        
         <div class="two"> 
        好吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼或或或或或或或或或或或或或呵呵哈哈哈或或或或或或或或或或好吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼或或或或或或或或或或或或或呵呵哈哈哈或或或或或或或或或或         </div>
  </div>

 </body></html>