BFC用途总结

前端黑板报

发布于 2018-01-29 16:15:31

1K0

发布于 2018-01-29 16:15:31

文章被收录于专栏：前端黑板报前端黑板报

前次写了一些关于BFC的基本概念，这次接上次的写一些BFC的应用。

BFC引起margin塌陷

在常规流中，盒子在垂直方向上从上到下排列。垂直方向之间的距离由单个margin值决定（其中还有计算公式），而不是两个元素垂直方向的margin值之和。

下面让我们看一张图片来加深理解：

如上图，其代码结构：

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
</div>

css代码如下：

.container {
  background-color: red;
  overflow: hidden; /* creates a block formatting context */
}

p {
  background-color: lightgreen;
  margin: 10px 0;
}

看上去，两个p元素之间的距离应该是20px，但实际上是10px，这就是“margin塌陷”。上面提到的计算公式就是：两元素之间的距离始终以最大margin值决定，若相等则等于其中一个值。

使用BFC阻止margin塌陷

这看上去与第一个作用有点矛盾，但是请大家记住，造成margin塌陷的原因是相邻的盒子属于同一个BFC。如果它们不在一个BFC中，就不会塌陷，所以我们要使它们存在于两个BFC中。

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
  <div class="newBFC">
    <p>Sibling 3</p>
  </div>
</div>

.container {
  background-color: red;
  overflow: hidden; /* creates a block formatting context */
}

p {
  margin: 10px 0;
  background-color: lightgreen;
}

.newBFC {
  overflow: hidden;  /* creates new block formatting context */
}

如下图：

使用BFC来包含浮动块

在日常工作中经常会遇到一个容器包含浮动的子元素，此时子元素脱离常规文档流，父容器没有高度。一般的解决方法是使用“clearfix”，但是同样可以使用BFC来解决。

下面代码会造成第一种情况：

<div class="container">
  <div>Sibling</div>
  <div>Sibling</div>
</div>

.container {
  background-color: green;
}

.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}

稍加改造，就会有上图右边的结果：

.container {
  overflow: hidden; /* creates block formatting context */
  background-color: green;
}

.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}

使用BFC阻止文本环绕

Figure1的文本环绕图片，但正常情况下，我们需要实现Figure2中排版。可以使用margin来实现，但是我们依旧可以使用BFC来完成。

<div class="container">
  <div class="floated">
    Floated div
  </div>
  <p>
    Quae hic ut ab perferendis sit quod architecto, 
    dolor debitis quam rem provident aspernatur tempora
    expedita.
  </p>
</div>

.floated{
    float:left;
}

如果此时使p创建一个BFC，就会达到我们要的效果：

p{
    overflow:hidden;
}

使用BFC进行多列布局

在一个容器中我们要进行多列布局，并且覆盖整个宽度，有时候最后一列会错位。原因是一些浏览器会四舍五入值导致最后总宽度之和大于容器的宽度。此时就可以用BFC解决：

<div class="container">
  <div class="column">column 1</div>
  <div class="column">column 2</div>
  <div class="column">column 3</div>
</div>

.column {
  width: 31.33%;
  background-color: green;
  float: left;
  margin: 0 1%;
}

/* Establishing a new block formatting 
   context in the last column */
.column:last-child {
  float: none;
  overflow: hidden; 
}

在flex没有出现之前是没有好的办法解决此类问题的。

上面就总结了一些用法，肯定还有别的使用场景，以后慢慢总结。

参考：

http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2015-07-11，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自前端黑板报微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度