CSS盒模型与BFC

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

如何获取盒模型的宽高

BFC(用于解决边距重叠)

基本概念

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

做用

如何建立BFC

最多见的就是overflow:hidden、float:left/right、position:absolute浏览器

BFC使用场景

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

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

也能触发BFC的性质，即：

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

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

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

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

例子：flex

盒子的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，就能避免外边距折叠spa

<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;
}
复制代码

参考3d

https://juejin.im/post/5a4dbe026fb9a0452207ebe6
https://juejin.im/post/59b73d5bf265da064618731d