关于BFC的理解

来源：互联网发布：淘宝切图模块切图失败编辑：程序博客网时间：2024/05/02 01:09

BFC相信大家都听过吧，在页面布局的时候肯定会接触过，但是对于BFC真的了解多少呢，这几天复习接触到了BFC所以我拿来总结一下，也对自己的思路进行一下整理。

一. BFC是什么？

BFC名字叫做块级格式化上下文，是W3C CSS 2.1 规范中引入的一个概念。在普通流中的盒子会参与一种格式化上下文，块级盒参与块级格式化上下文（BFC），行级盒参与行级格式化上下文（IFC），这里我们主要理解一下。

BFC决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，简单理解BFC就是一块独立的渲染区域，它规定这个区域里的内容与区域外部毫不相干，即互不影响。

二. BFC的形成规则

float不为none。
position为absolute或fixed。
overflow不为visibility。
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

三. BFC的特性

box在竖直方向上依次排列。
box垂直方向上的距离由margin决定，属于同一个BFC区域的box的margin值会发生叠加。
计算BFC区域的高度时，浮动元素也要参与计算。
每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此。
BFC的区域不会与float box重叠。

四. 结合例子理解

说了以上那么多，干脆来点干货结合着理解一下。

自适应两列布局

 <style type="text/css">      *{            margin: 0;            padding: 0;        }       body{          height: 500px;          width: 100%;       }       .Div1{          height: 100%;          width: 40%;          float: left;          background-color: red;       }       .Div2{          height: 100%;          width: 60%;          background-color: blue;       }</style><body>    <div class="Div1"></div>    <div class="Div2"></div></body>

这里写图片描述

理解：Div1通过设置float形成一个bfc区域，依据bfc特性（每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此）所以Div2的左边界会与body重合，因而两个盒子会有重叠部分。

下面改动代码再看看效果：

  <style type="text/css">      *{          margin: 0;          padding: 0;        }       body{          height: 500px;          width: 100%;       }       .Div1{          height: 100%;          width: 40%;          float: left;          background-color: red;       }       .Div2{          height: 100%;          width: 60%;          background-color: blue;          overflow: hidden;       }</style><body>    <div class="Div1"></div>    <div class="Div2"></div></body>

这里写图片描述

理解：Div2通过设置overflow形成一个bfc区域，根据bfc特性（BFC的区域不会与float box重叠），因而去除了重叠部分，这就是我们想要的效果了。

那使用bfc思想构成三列布局也就简单了，代码如下：

<style type="text/css">      *{          margin: 0;          padding: 0;       }       body{          height: 500px;          width: 100%;       }       .Div1{          height: 100%;          width: 40%;          float: left;          background-color: red;       }       .Div2{          height: 100%;          width: 30%;          background-color: blue;          float: left;          overflow: hidden;       }       .Div3{          height: 100%;          width: 30%;          background-color: green;          overflow: hidden;       }</style><body>    <div class="Div1"></div>    <div class="Div2"></div>    <div class="Div3"></div></body>

这里写图片描述

理解：根据上面两列布局的思想，我先把前两个盒子构成两列布局的样子，再将第二个和第三个盒子也依据两列布局的思想构成就好了，这下自适应的四列，五列等等都可以用这个思想了。

清除浮动

<style type="text/css">    .par {          border: 5px solid #fcc;          width: 300px;          }    .child {          border: 5px solid #f66;          width:100px;          height: 100px;          float: left;        }</style><body>        <div class="par">            <div class="child"></div>            <div class="child"></div>        </div></body>

这里写图片描述

理解：我们所期待的样子应该是par盒子的高度被里面内容撑开，但是却没有，里面的盒子设置float值形成bfc，而bfc是一个独立的容器，不会与外面的元素产生作用，所以par根本没有受到里面内容物的影响。所以该怎么办呢，我们对代码做以下处理：

<style type="text/css">         .par {                border: 5px solid #fcc;                width: 300px;                overflow: hidden;            }        .child {            border: 5px solid #f66;            width:100px;            height: 100px;            float: left;        }</style><body>        <div class="par">            <div class="child"></div>            <div class="child"></div>        </div></body>

这里写图片描述

理解：par盒子通过设置overflow值形成一个bfc，一句bfc特性（计算BFC区域的高度时，浮动元素也要参与计算），所以计算par盒子的高度时，也需要包含里面的盒子高度。

防止垂直 margin 重叠

<style type="text/css">        p {            color: #f55;            background: #fcc;            width: 200px;            line-height: 100px;            text-align:center;            margin: 100px;        }</style><body>    <p>Haha</p>    <p>Hehe</p></body>

这里写图片描述

理解：根据bfc特性（box垂直方向上的距离由margin决定，属于同一个BFC区域的box的margin值会发生叠加），所以造成了两个p标签之间的高度为100px，发生了叠加。但是这并不是我们想要的结果，所以可以考虑将这两个盒子分开也就是不让它们处于同一个bfc中，就不会发生叠加了，代码改动如下：

<style type="text/css">        .wrap {            overflow: hidden;        }        p {            color: #f55;            background: #fcc;            width: 200px;            line-height: 100px;            text-align:center;            margin: 100px;        }</style><body>    <p>Haha</p>    <div class="wrap">        <p>Hehe</p>    </div></body>

这里写图片描述

理解：使一个p标签外包裹一个div设置overflow值形成另一个bfc，然后两个p标签就不在同一个bfc中了，所以margin不会发生叠加。当然这里也有一个笨办法就是在两个p标签之间设置一个空的div盒子高度为100px，我是不是很机智。。。

0 0

关于BFC的理解

BFC相信大家都听过吧，在页面布局的时候肯定会接触过，但是对于BFC真的了解多少呢，这几天复习接触到了BFC所以我拿来总结一下，也对自己的思路进行一下整理。

一. BFC是什么？

BFC名字叫做块级格式化上下文，是W3C CSS 2.1 规范中引入的一个概念。在普通流中的盒子会参与一种格式化上下文，块级盒参与块级格式化上下文（BFC），行级盒参与行级格式化上下文（IFC），这里我们主要理解一下。

BFC决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，简单理解BFC就是一块独立的渲染区域，它规定这个区域里的内容与区域外部毫不相干，即互不影响。

二. BFC的形成规则

三. BFC的特性

四. 结合例子理解

说了以上那么多，干脆来点干货结合着理解一下。

理解：Div1通过设置float形成一个bfc区域，依据bfc特性（每个元素的margin box的左边， 与包含块border box的左边相接触，即使存在浮动也是如此）所以Div2的左边界会与body重合，因而两个盒子会有重叠部分。

下面改动代码再看看效果：

理解：Div2通过设置overflow形成一个bfc区域，根据bfc特性（BFC的区域不会与float box重叠），因而去除了重叠部分，这就是我们想要的效果了。

那使用bfc思想构成三列布局也就简单了，代码如下：

理解：根据上面两列布局的思想，我先把前两个盒子构成两列布局的样子，再将第二个和第三个盒子也依据两列布局的思想构成就好了，这下自适应的四列，五列等等都可以用这个思想了。

理解：par盒子通过设置overflow值形成一个bfc，一句bfc特性（计算BFC区域的高度时，浮动元素也要参与计算），所以计算par盒子的高度时，也需要包含里面的盒子高度。

理解：使一个p标签外包裹一个div设置overflow值形成另一个bfc，然后两个p标签就不在同一个bfc中了，所以margin不会发生叠加。当然这里也有一个笨办法就是在两个p标签之间设置一个空的div盒子高度为100px，我是不是很机智。。。

理解：Div1通过设置float形成一个bfc区域，依据bfc特性（每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此）所以Div2的左边界会与body重合，因而两个盒子会有重叠部分。