我们都知道BFC、IFC这样的名词，也知道他们的定义，比如BFC，就是块级格式化上下文，表示块级盒子定义的区域，拥有自己的渲染规则，并且盒子之间不会相互影响等。但是具体包含了哪些渲染规则以及如何渲染可能知道的比较模糊，这里也是说下容易忽略的地方。
在说这些渲染规则之前，先来说下一些概念，理解了这些概念，才能更好的理解盒模型。
-
块级框，div 等块级元素生成的框体就是块级框
-
行内框，同理，span 这样的行内元素生成的框体就是行内框
-
行内块级框，即 display: inline-block的行内块级元素生成的框体就是行内块级框。
-
容纳快，就是包含当前元素的父级框体，简单来说，块级元素的容纳块就是块级框，行内元素的容纳块就是行内框，当然也有可能是块级框。
而BFC、IFC这样的格式化上下文就是在容纳块中定义的。先从横向布局开始说起，看下面的
.line8 > .child1 {
width: auto;
margin-left: 50px;
margin-right: 20px;
}
.line8 > .child2 {
width: 300px;
margin-left: auto;
margin-right: 150px;
}
.line8 > .child3 {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.line8 > .child4 {
width: 300px;
margin-left: auto;
margin-right: -200px;
}
得到的结果如下：
从中也不难看出：
-
横向布局时，外边距不会发生折叠
-
包含一个auto值时，用整个容纳块的宽度减去设置的宽度，剩下的宽度分配给设置给auto的元素，因为外边距可以是负值，因此对于负值而言，也同样适用上述规则，可以看到第四个div就是负值外边距的情况。
-
包含两个auto值时，就是将剩余距离平分为两份，每个auto值各占一半，这也是我们平时经常使用margin: 0 auto;居中的原理是一样的。
需要注意的时，这里关于块级盒子的一些属性，如外边距，内边距，边框，轮廓等，除了外边距可以设置为负值，其他设置为负值的时候，浏览器会忽略掉整条规则，并且auto值也只有宽高、外边距以及轮廓属性可以设置，其他设置auto值都是无效的，会被浏览器忽略掉。
再说纵向布局会产生margin折叠，折叠的规则就是取大值，也就是对于两个纵向布局的元素，margin-bottom和margin-top发生重叠，那么谁的值大就取谁的值作为折叠后的外边距的值。如果margin为负值的话，则取其绝对值大的那个值为折叠后的边距，如下所示：
.line8 > .child5 {
margin-bottom: 10px;
}
.line8 > .child6 {
margin-top: -50px;
}
如果您觉得本文的内容对您的学习有所帮助：
关键字：
css