CSS盒模型与BFC-CSDN博客

盒模型

如何设置

box-sizing: content-box 标准模型(浏览器默认设置) box-sizing: border-box IE模型

如何获取盒模型的宽高

BFC(用于解决边距重叠)

基本概念

BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

作用

内部的盒子会在垂直方向，一个个地放置；
BFC是页面上的一个隔离的独立容器；
属于同一个BFC的两个相邻Box的上下margin会发生重叠；
计算BFC的高度时，浮动元素也参与计算
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
BFC的区域不会与float重叠；

如何创建BFC

float的值不能为none
overflow的值不能为visible
display的值为table-cell, table-caption, inline-block, flex, inline-flex中的任何一个
position的值不为relative和static

最常见的就是overflow:hidden、float:left/right、position:absolute

BFC使用场景

不和浮动元素重叠如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。比如下图的效果，参考例子

<style>
    body {
        width: 300px;
        position: relative;
    }

    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>
复制代码

之所以是这样，是因为上文的规则5：每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

所以要想改变效果，使其互补干扰，就得利用规则6 ：BFC的区域不会与float重叠，让

也能触发BFC的性质，即：

.main {
    overflow: hidden;
}
复制代码

当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：

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

根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。两个相邻的margin之间如果没有明确的界限（padding、border），则会发生重叠，重叠后相应的margin为较大的那个

例子：

盒子的top margin和它第一个普通流子元素的top margin
盒子的bottom margin和它下一个普通流兄弟的top margin
盒子的bottom margin和它父元素的bottom margin
盒子的top margin和bottom margin，且没有创建一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>
复制代码

两个p之间的margin仅为100px, 是因为他们同属于 body这个根元素，根据规则3，他们会发生margin重叠。所以我们需要让它们不属于同一个BFC，就能避免外边距折叠

<style>
    .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>
复制代码

清除元素内部浮动当container内部有float元素时，container本身没有高度，里面的子元素也会脱离文档流，为了避免这个情况，可以用BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素

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

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

参考