32 BFC原理

最新推荐文章于 2021-10-15 11:07:17 发布

「已注销」

最新推荐文章于 2021-10-15 11:07:17 发布

阅读量117

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/duola8789/article/details/84990662

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

定义

BFC（Block Formatting Context – 块级格式化上下文）是布局过程中生成会块级合资的区域，也是浮动元素与其他元素的交互限定区域。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。

两个兄弟盒之间的margin不会合并，属于同一个BFC的块级元素之间的margin会合并

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin合并，清除浮动什么的也好理解了。

会产生BFC的情况

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC的应用

平时好多布局的技巧其实都利用了BFC的规则，只不过自己不清楚。

自适应两栏布局

利用的规则：每个元素的左边，与包含border的BFC元素的左边相接触，即使存在浮动一仍然如此

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .left {
    width: 100px;
    height: 50px;
    float: left;
    background: red;
  }
  .right {
    height: 50px;
    background: fuchsia;
  }
</style>

<body>
  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

清除浮动坍塌

利用的规则：

计算BFC的高度时，浮动元素也参与计算。

.baba {
  border: 10px solid red;
  min-height: 10px;
  display: inline-block; /*触发BFC*/
}
.erzi {
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

防止垂直`margin`合并

利用的规则：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

<style>
  p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    margin: 100px;
}
</style>
<body>
  <p>Haha</p>
  <p>Hehe</p>
</body>