BFC 以及inline-block 11

本教程版权归凯旋和饥人谷所有，转载须说明来源

一 、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系或者没有内容的元素本身）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为合并，并且因而所结合成的外边距称为合并外边距。。
当两个外边距都是正数时，取两者之中的较大者；当两个外边距都是负数时，取两者之间绝对值较大者；当两个外边距一正一负时，取的是两者的和。
示例如下：
正常文档流中两个相邻兄弟之间的外边距合并（如图取最大值30px）

30px.png

解决办法：
设置display:inline-block;

display-inlineblock.png

设置float

float.png

给子元素加了div包裹之后，利用overflow:hidden／auto形成bfc
外边距不合并。

加包裹 bfc.png

父子关系外边距合并

父子关系的合并.png

父子外边距合并解决办法：
给父元素加边框或者padding(类似在两者的外边距加一个分界)

解决办法.png

参考
参考

自身的合并

一个元素如果里面没有东西，也没有边框和padding，那么它自身的外边距就会融合，也会发生外边距合并。

自身去除合并.png

二 、去除inline-block内缝隙有哪几种常见方法?

![ 横排无缝隙_580891.png]

横排无缝隙.png

错排无缝隙.png

父级字体设置为零.png

这里需要注意的一点是在父元素里面设置了font-size之后，在容器里面的子元素需要把字体大小重置回来。

设置负margin.png

参考

三 、父容器使用overflow: auto| hidden撑开高度的原理是什么？

overflow: auto| hidden形成了一个新的BFC,这个新的BFC是一个独立的布局环境,不受外界影响,也不会影响外界

四 、BFC是什么？如何形成BFC，有什么作用?

BFC全称为block formatting context，翻译过来就是块级格式化上下文，是页面 CSS 视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响的一个区域。（简单理解就是它是一个独立封闭的盒子，它对外面的元素不产生影响，但里面的元素还是会相互影响的，除非在这里面又产生了一个BFC）.
BFC是一个名词，是一个独立的布局环境.BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
以下情况都可以形成BFC：

float为 left|right（不为none）
overflow为 hidden|auto|scroll (不为visible)
display为 table-cell|table-caption|inline-block|inline-flex
position为 absolute|fixed (不为relative和static)

BFC主要有以下一些用处：
清除浮动
防止外边距合并
设计布局

五 、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？

是指父容器撑不开空间（浮动元素包含在里面），原因为浮动元素是脱离文档流的，父元素感知不到浮动元素的高度，此时父容器里面相当于没有元素一样，从而导致高度塌陷；
解决父容器塌陷的方法就是要清除浮动 (10)

六 、以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

/*设置clear类的after伪类,即在clear类所在元素的结尾 
增加一个虚拟的子元素,该子元素具有{}中的属性*/
clearfix:after{
 /*在clearfix后面增加元素*/ 
content: '' ";
 /*该元素内容为空*/ 
display: block;  /*显示为块级元素,这样可以保证该元素在
浮动元素的下方,确保清除浮动起作用
 即:父元素感知不到浮动元素,但是可以感知本元素,
而本元素又必须在浮动元素的下方,所以父元素高度就不会坍塌*/
clear: both;  
/*清除两侧浮动*/
}

.clearfix{  /*IE8以下没有伪类,用以下方式清除*/ 
*zoom: 1; /*只针对IE8以下，
触发IE浏览器的haslayout ，解决ie下的浮动，margin重叠等问题。 */}

*zoom: 1; 这个属性是IE专有属性，其他浏览器没有，它可以设置或检索对象的缩放比，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。现在已经基本不用这个属性，所以仅在考虑兼容的清除浮动会用到。(如果你想放大或者缩小你的内容，可以使用CSS 的transform)
上述方法可以在父容器的最后添加一个内容为空存在与文档流中并且清除左右浮动的元素。父容器将会感知到这个空元素并且把自身空间撑开。
after和before
也可参考
bfc讲解

bfc