神奇的BFC

来源：互联网发布：淘宝云客服登录网址编辑：程序博客网时间：2024/05/20 17:40

一、什么是BFC

BFC即Block fomatting context的简称，可以简单地理解为“块级排版上下文”。它提供了一个独立的渲染环境和一套独特的渲染规则，只有Block-level box参与其中，它规定了内部的Block-level Box如何布局，并且这个环境中的元素不会与其它环境中的布局互相影响。

二、BFC的布局规则

浮动元素、绝对定位元素，不是块级盒的块级包含块(比如inline-block、table-cell、table-capation)和overflow值不为visible的块级盒子为它们的内容建立了一个新的块级排版上下文。
在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的，相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。参与BFC的布局的只有普通流normal flow中的块级盒，而float、position值不为relative\static的元素是脱离BFC这一布局环境的，不参与BFC的布局
在一个块级排版上下文中，每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反），即使在有浮动元素参与的情况下也是如此(即使一个盒子的行盒是因为浮动而收缩了的)，除非这个盒子新建了一个块级排版上下文(在某些情况下这个盒子自身会因为floats而变窄)。
独立的块级排版上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内。而且它会避免与浮动块重叠。

三、BFC的应用场景

1.关于外边距合并

      p {        width: 100px;        height: 100px;        background-color: gray;        margin:100px;      }  <body>    <p></p>    <p></p>  </body>

很明显，两个p元素之间的间距只有100px，而不是200px，这就是所谓的“边距合并”，因为在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。如果想要避免让两个盒子的边距合并，可以考虑把这两个盒子放在不同的BFC中。

.container {      overflow: hidden;    }    p {      width: 100px;      height: 100px;      background-color: gray;      margin: 100px;    }<body>  <div class='container'>    <p></p>  </div>  <div class='container'>    <p></p>  </div></body>

边距不合并
在这里，二者的边距并未合并。

2.关于清除浮动

    .parent {      border: 5px solid red;      width: 200px;    }    .child {      width: 100px;      height: 100px;      background-color: gray;      float: left;    }<body>  <div class="parent">    <div class="child">    </div>  </div></body>

浮动元素脱离了文档流，造成了父容器布局的坍塌。如果触发容器的BFC，那么容器将会包裹浮动元素(清除浮动效果)。

.parent {      border: 5px solid red;      width: 200px;      overflow: hidden;    }    .child {      width: 100px;      height: 100px;      background-color: gray;      float: left;    }<body>  <div class="parent">    <div class="child">    </div>  </div></body>

此处达成了清除浮动的效果，避免了浮动对布局的破坏。

3 .阻止元素被浮动元素覆盖

.main {      border: 2px solid red;      width: 200px;      height: 200px;      background-color: pink;    }    .left {      width: 100px;      height: 100px;      background-color: gray;      float: left;    }<body>  <div class="left">    一个左浮动的元素  </div>  <div class="main">    我是一个没有浮动也没有设置BFC的元素，我的背景色是粉色，宽度200px,边框颜色为红色.宽度为200px，文字表现为环绕  </div></body>

这里写图片描述
此时，第二个元素有部分被浮动元素所覆盖，(但是文本信息表现为环绕效果) 如果想避免元素被覆盖，可触发第二个元素的 BFC 特性，在第二个元素样式中加入 overflow: hidden，就会变这种效果：

这是一种常用的定宽+自适应布局。还可以再加一栏向右浮动构建出两栏定宽+自适应布局。

其实换个角度来看，这三组效果都体现了BFC的排版的独立性：BFC内部和外部的排版不会相互影响。就第一个而言，阻止外边距的合并正是阻止了外界排版对当前BFC区域内边距的影响；第二组中对清除浮动的结果是为了阻止BFC内部浮动对外界布局的影响；第三组中新建的BFC阻止了浮动元素对自身的覆盖，其实也是为了阻止外界浮动布局对BFC内部的影响。

阅读全文

1 0