BFC用途总结

前次写了一些关于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/

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2015-07-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

think-cell chart系列15——蝴蝶图

今天跟大家分享think-cell chart系列的第15篇——蝴蝶图。 ? 当然think-cell chart中是无法直接制作蝴蝶图的,需要通过一对开口方向...

4724
来自专栏偏前端工程师的驿站

CSS魔法堂:小结一下Box Model与Positioning Scheme

前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考。 《CSS魔法堂:重新...

1896
来自专栏数据小魔方

think-cell chart系列18——复合图表与次坐标轴

今天跟大家分享的是think-cell chart系列的第18篇——复合图表与次坐标轴。 今天要跟大家讲解如何在think-cell chart中开启次坐标轴,...

1.1K7
来自专栏coding...

Objective-C 使用核心动画CAAnimation实现动画先来看看效果吧Demo地址

https://github.com/gongxiaokai/CAAnimationDemo

933
来自专栏编程

CSS遮罩的过渡效果有趣的幻灯片

今天,我们想向您展示如何使用CSS Masks创建一个有趣而简单却引人注目的过渡效果。与裁剪一起,遮罩是定义可见性和与元素合成的另一种方式。在下面的教程中,我们...

2569
来自专栏何俊林

通过GPUImage实现40+种滤镜与实时美颜功能

推荐一个滤镜和美颜功能实现项目,包含40+种滤镜与实时美颜与后处理美颜功能,非常强大。 相机预览模式 示例见:com.seu.magiccamera.activ...

4678
来自专栏前端架构与工程

SVG的动态之美-搜狗地铁图重构散记

2890
来自专栏PPV课数据科学社区

《用地图说话》之:十字绣中国热力数据地图

作图思路: 准备一块300*300小单元格组成的区域,对照地图图形,在每个省图形范围内的单元格填入该省的数据,然后对这些单元格应用条件格式->色阶,就形成了一幅...

3073
来自专栏瞎说开发那些事

使用RPA绘制素描图

2066
来自专栏IMWeb前端团队

利用canvas实现一个抠图小工具

利用canvas实现一个抠图小工具 0 前言 作为新一代的前端开发工程师,PS抠图切图已经不是必备技能了,我们有UI/交互/视觉等更专业的设计同学帮我们做这个事...

4315

扫码关注云+社区

领取腾讯云代金券