CSS--BFC

1、是什么

Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。

2、布局规则

内部的盒子会在垂直方向，一个个地放置；
BFC是页面上的一个隔离的独立容器；
属于同一个BFC的两个相邻Box的 上下margin会发生重叠；
计算BFC的高度时，浮动元素也参与计算
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
BFC的区域不会与float重叠；

3、如何触发BFC

body 根元素；
浮动元素：float 不为none的属性值；
绝对定位元素：position (absolute、fixed)
display为： inline-block、table-cells、flex
overflow 除了visible以外的值 (hidden、auto、scroll)

4、应用

（1）两个相邻的普通流中的块元素垂直方向上的 margin会折叠(解决margin叠加问题)

<head>
.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red;  
}  
</head>

<body>
   <div class="p"></div>  
   <div class="p"></div>  
</body>

效果图：

原因：上文的例子之所以发生外边距折叠，是因为他们同属于 body这个根元素，所以我们需要让它们 不属于同一个BFC，就能避免外边距折叠：

解决原理：盒子垂直方向的距离由margin决定，属于同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。

解决方案：让它们 不属于同一个BFC

<div class="p"></div>  

<div class="wrap">  
  <div class="p"></div>  
</div>

.wrap {  
  overflow:hidden;  

.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red;

（2）BFC可以包含浮动的元素（清除浮动）

正常情况下，浮动的元素会脱离普通文档流，所以下面的代码里：

<div style="border: 1px solid #000;">
    <div style="width: 50px; height: 50px; background: #eee;
               float: left;">
    </div>
</div>

外层的div会无法包含内部浮动的div，效果见下图：

原因：正常情况下，浮动的元素会脱离普通文档流

解决原理：但如果我们触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素，所以只要把代码修改如下：

解决方案：父级创建BFC

(3) BFC可以阻止元素被浮动元素覆盖(两列的自适应布局)

<div class="aside"></div>  
<div class="main"></div>  

div {  
  width:300px;  
}  
.aside {  
  width: 100px;  
  height: 150px;  
  float: left;  
  background: black;  
}  
.main {  
  height:200px;  
  background-color:red;  
}

原因：因为上文的规则5： 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

所以要想改变效果，使其互补干扰，就得利用规则6 ：BFC的区域不会与float重叠，让 <div class="main"> 也能触发BFC的性质

解决原理：利用规则6 ：BFC的区域不会与float重叠

通过这种方法，就能用来实现两列的自适应布局。

.main {  
  overflow:hidden;  
  height:200px;  
  background-color:red;  
}

猜你喜欢