盒子模型

标准盒模型

IE盒模型

盒模型的转化

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

css 外边距合并

上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值

只有普通文档流中元素的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

边距重叠解决方案(BFC)

Block Formatting Context 直译为“块级格式化上下文”。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
https://segmentfault.com/a/1190000006740129

触发BFC条件

1. body根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

BFC的作用

1. 清除浮动

.clearfix:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.clearfix{
    zoom:1; // 兼容IE6~8
}