keywords: inline-block、BFC、边距合并、overflow、高度塌陷。
-
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距高度中的最大值。
1、当一个元素出现在另一个元素上面时，第一个元素的下外边距和第二个元素的上外边距会发生合并：
上下相邻元素外边距合并
2、当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开）它们的上或下外边距也会发生合并：
包含元素外边距合并
3、假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，元素的上外边距和下外边距就碰到了一起，发生合并：
元素自身外边距合并
4、假设有一个空元素，它有外边距，但是没有边框或填充。如果这个这个元素的外边距遇到另一个元素的外边距，将发生合并：
连续外边距合并.png
避免元素外边距合并的关键：
1、对于包含元素外边距合并的情况（父子关系），对父元素加边框、填充或使父元素形成BFC；
2、对于兄弟关系，需使某一元素形成BFC（若使用overflow，需用父容器隔离）。
3、浮动和绝对定位不与任何元素产生 margin 折叠;
4、inline-block元素与其兄弟元素、子元素和父元素的外边距都不会折叠（包括其父元素和子元素）；
-
去除inline-block内缝隙有哪几种常见方法?
行内元素间使用换行符、空格、制表符会产生一个空格的缝隙。去除缝隙的常见方法有一下几种：
1、删除换行符、空格、制表符;
2、使用负margin;
3、使用浮动（使用overflow或浮动父容器来撑开高度）：
2016-06-23_11-11-14.png
4、对父容器设置font-size:0：
文本是可以由font控制的，若父容器的font-size设置为0，则容器内的文本消失，文本间的缝隙当然也就不存在了，此时再将inline-block的元素设置font-size覆盖就好。
font-size:0
-
父容器使用overflow: auto| hidden撑开高度的原理是什么？
使父容器形成BFC，此时父元素的height会计算浮动元素高度，因此撑开了容器高度。
-
BFC是什么？如何形成BFC，有什么作用?
BFC,全名block famatting context，中文译名块级格式化上下文。w3c这样解释：
浮动，绝对定位元素，inline-block，table-cell， table-caption和overflow的值不为visible的元素，将创建一个新的块级格式化上下文。
根据定义，可以给定给以下属性赋值创建BFC：
1、float 2、position 3、display 4、overflow
Formattiong Context指的是页面中的一个渲染区域，它决定子元素如何定位，以及与其他元素的相互关系和作用。
BFC指的是一个独立的块级渲染区域，只有block-level box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC的作用：
1、防止margin重叠；
2、防止浮动元素高度塌陷，闭合浮动元素；
参考：
我对BFC的理解
理解css中的BFC
深入理解BFC
BFC神奇的背后原理
-
浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
高度塌陷.gif
浮动元素脱离了普通流，父容器失去浮动元素的高度，造成父容器高度塌陷。
避免高度塌陷的关键在于让父元素生成BFC。
1、利用overflow;
2、float父元素;
3、利用inline-block;
4、利用absolute;
当然还可以利用clear：
1、在父元素中添加一个最靠后的子标签<div class="clear"></div>在css中添加.clear{clear:both;}；
2、添加伪元素after:
content:'';
display:block;
clear:both;
}```
参考：
[那些年我们一起清除过的浮动](http://www.iyunlu.com/view/css-xhtml/55.html)
- ###以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{ /伪元素选择器，在选中元素内容区的最后添加内容/
content:''; /添加空白/
display:block; /显示为块级元素/
clear:both; /清除浮动，不允许元素左右两边存在浮动元素/
}
.clearfix{
zoom: 1; /zoom是ie中的专有属性，触发ie浏览器的halayout属
性，兼容ie6、7*/
}```
通过添加clearfix类，使新添加的空白内容撑开父容器的高度，达到不添加新的标签即可闭合浮动的目的。
与BFC撑开空间的原理（计算浮动元素高度）不同，使用以上代码根本在于充分利用了clear属性使元素下移，撑开高度，显然浮动元素的高度是不被计算在内的。
网友评论