BFC深入理解

2024年4月9日 183次阅读 来源: 哈哈落叶

一直都知道overflow可以清除浮动，但是却不知道这背后的原理。查了众多资料后才发现有BFC这么个东西，写这篇文章一是为了加深记忆，二是为了加深理解。

什么是BFC？
BFC的全称是Block Formatting Context 块级格式化上下文。
一般情况下BFC只存在于根级元素，但有时我们在设置某些CSS属性时也会产生BFC。但是前提是必须是块级元素。

以下属性声明会产生BFC：
1、float不为none
2、overflow不为visible
3、position不为static和relative
4、display为inline-block table-cell table-caption
5、flex、inline-flex布局

BFC布局规则
1、内部元素会垂直排列
2、垂直方向的间隔由margin决定，同一个BFC里同级别的两个元素之间的margin会产生坍塌
3、元素会靠在外层元素的左边或者右边，float同理
4、BFC不会与float重叠（absolute,fixed除外）
5、BFC计算高度时，float元素的高度也参与计算
6、BFC是隔离的，它里面元素就算翻江倒海也不会影响外层，外层的各种变化也不会影响BFC。

BFC应用

解决margin坍塌

      <div>
         <div class="elementA" style="margin: 10px"></div>
         <div class="elementB" style="margin: 10px"></div>
      </div>

elementA与elementB之间的实际margin为10px;
在elementB的外层添加一个div设置BFC属性，此时elementA, elementB的间隔为20px,代码如下：

      <div>
         <div class="elementA" style="margin: 10px"></div>
         <div style="overflow:hidden">
           <div class="elementB" style="margin: 10px"></div>
         </div>
      </div>

解决float覆盖

 <div>
     <div class="elmentA" style="float:left;width:100px;height:100px;"></div>
     <div class="elementB" style="height:200px">123</div>
 </div>

以上代码中，elmentA会覆盖到elementB上。
解决方案如下,给elementB添加一个BFC属性elementB便会避开elementA：

 <div>
     <div class="elmentA" style="float:left;width:100px;height:100px;"></div>
     <div class="elementB" style="height:200px;overflow:hidden">123</div>
 </div>

计算内层float元素的高度。

 <div class="wrapper">
       <div style="float:left;height:100px"></div>
 </div>

上述代码中，wrapper是没有高度的，虽然子元素设置了高度为100px,但是由于子元素是float所以父元素没有高度。
解决方案如下,给wrapper添加一个BFC属性，这时wrapper的高度就为子元素的高度：

<div class="wrapper" style="overflow:hidden">
       <div style="float:left;height:100px"></div>
 </div>

对overflow：hidden的额外说明

当设置了一个元素为样式为：

 overflow：hidden
 height:auto

元素首先会计算出自己的高度才知道应该裁剪哪一部分，当生成BFC时会首先计算里面元素的高度,当里面有float元素时会计算float元素的高度，并把float元素的高度加到自身高度中。但如果高度有具体的值时，float高度超过时还是会被裁剪。

对position:absolute以及position:fixed的额外说明

在本文前面提到过 BFC的区域不会和float区域重叠，但是absolute和fixed布局有例外。absolute和fixed会覆盖到float元素上，因为absolute和fixed已经脱离文档流。

    原文作者：哈哈落叶
    原文地址: https://segmentfault.com/a/1190000014111198
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞