1、margin合并
只有在普通文档流中，两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，行内框、浮动框或绝对定位之间的外边距不会合并。
2、margin越界
第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题
以第一个子元素的margin-top为例：当父元素没有border时，设置第一个子元素的margin-top值的时候会出现margin-top值加在父元素的现象，解决办法有4个：
（1）给父元素加边框border
（2）给父元素设置padding
（3）给父元素添加overflow:hidden
（4）父元素加前置内容生成 :before{content: " "; display: table}
3、BFC
BFC(Block formatting context)直译为"块级格式化上下文"。BFC是一个独立的渲染区域，只有block box参与，它规定了内部的block box如何布局，并且与这个区域外部毫不相干。
BFC的布局规则
（1）内部的Box会在垂直方向，一个接一个的放置；
（2）box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的margin会发生重叠。
（3）每个盒子（块盒与行盒）的margin box的左边，与包含块的border box的左边相接触，即使浮动也是如此。
（4）BFC区域不会与float box重叠。
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
（6）计算BFC的高度时，浮动的元素也参与计算。
如何创建BFC
（1）float的值不是none。
（2）position的值不是static或者relative。
（3）display的值是inline-block、table-cell、flex、tavle-caption或者inline-flex
（4） overflow的值不是visible
清楚浮动
当我们不给父节点设置高度，而子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动，根据BFC的布局规则的（6）我们只要激活父节点的BFC即可
网友评论