BFC

最新推荐文章于 2024-08-03 17:34:58 发布

zc自由飞~

最新推荐文章于 2024-08-03 17:34:58 发布

阅读量102

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_39808181/article/details/114043129

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

BFC定义：

块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会互相影响。

IE下为layout，可用过zoom:1触发

在平常的css编写过程中，zoom;1能够比较神奇的解决ie下比较奇葩的bug。

譬如：外边距（margin的重叠）、清除浮动、触发ie的haslayout属性等。

.clearfix{zoom:1};/*触发haslayout*/

BFC原理：

BFC内部的盒子，会在垂直方向，一个接一个的放置，垂直方向上也会发生边距重叠。
BFC就是页面上的一个独立容器，容器内的子元素不会影响到外面的元素，外面的元素也不会影响到里面的元素。
BFC的区域不会与float box重叠。
计算BFC的高度时，浮动元素也被计算在内。

BFC出发条件：

根元素或其他包含元素；
浮动元素：float:left/right
绝对定位：position:absolute/fixed
具有overflow且值不少visible的块元素，overflow:auto/hidden
内联块：display：inline-block/table-cell/table-caption/flex/inline-flex

当属性值为上述情况时，都会让所属box产生BFC

BFC的应用

1.解决垂直边距重叠问题：这样就好出现第一个p标签的margin-bottom不会和第二个p标签的margin-top重叠，这也是BFC的另一个原则，不会影响到外边的box，是一个独立的区域。

<section id="margin">
  <style>
    #margin {
      background: pink;
      overflow: hidden;
    }
    #margin>p {
      margin: 5px auto 25px;
      background: red;
    }
    #margin>div>p {
      margin: 5px auto 20px;
      background: red;
    }
  </style>
  <p>1</p>
  <div style="overflow:hidden">
     <p>2</p>
  </div>
  <p>3</p>
</section>

2.清除浮动：BFC子元素即使是float也会参与计算

<section id="float">
  <style media="screen">
    #float{
      background: #434343;
      overflow: auto;
    }
    #float .float{
      float: left;
      font-size: 30px;
    }
  </style>
  <div class="float">我是浮动元素</div>
</section>

3.自适应布局：利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

<section id="layout">
  <style media="screen">
    #layout{
      background: red;
    }
    #layout .left{
      float: left;
      width: 100px;
      height: 100px;
      background: #664664;
    }
    #layout .right{
      height: 110px;
      background: #ccc;
      overflow: auto;
    }
  </style>
  <div class="left"></div>
  <div class="right"></div>
</section>