在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
在什么场景下会出现外边距合并？
- 相邻元素：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 父子元素：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
- 元素自身上下margin：当一个元素内部没有高度和内容以及没有内边距和边框时，它自身的上下外边距也会发生合并。
如何合并？
- 全部都为正值，取最大者；
- 不全是正值，则都取绝对值，然后用正值减去最大值；
- 没有正值，则都取绝对值，然后用0减去最大值。
如何不让相邻元素外边距合并？
- 相邻的盒模型中，如果其中的一个是浮动的（floated），垂直margin不会被折叠，甚至一个浮动的盒模型和它的子元素之间也是这样。
- 设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）。
- 设置了绝对定位（position:absolute）的盒模型，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
- 设置了display:inline-block的元素，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
父子外边距合并范例
父子外边距合并
父元素的上边距为20px，子元素的上边距为40，最终合并为父元素上边距为40px。
去除inline-block内缝隙有哪几种常见方法?
- 去掉html里的空格
1
- 标签结束符换行
2
- 使用负margin
3
- 设置浮动
4
- 设置父容器font-size值为0。（注意这种情况下一定要给子元素单独设置font-size）
5
父容器使用overflow: auto| hidden撑开高度的原理是什么？
- BFC （Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素 设置了float:left，overflow:auto|hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。
- 独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。
overflow: auto| hidden清除浮动原理
BFC是什么？如何形成BFC，有什么作用?
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
如何形成BFC
既然BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
有人说display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC。
有什么作用?
- 要阻止margin重叠。
- 清除浮动
- 多栏布局
参考资料
浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法?
浮动导致的父容器高度塌陷指什么？为什么会产生？
如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。
由于浮动块不在文档的普通流中，所以文档的普通流中的块表现得就像浮动块不存在一样。它不再处于文档流中，所以它不占据空间，父级容器的高度即不会被撑开，导致高度塌陷的现象。
有几种解决方法？
-
在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div
1
-
在使用float元素的父元素添加overflow: auto| hidden;
2
-
使用after伪对象清除浮动
3
以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{ /*定义一个样式为clearfix元素的after伪类样式*/
content: ''; /*内容为空*/
display: block; /*表现为块级元素*/
clear: both;/*消除两旁浮动*/
}
.clearfix{
*zoom: 1;/*hack写法。IE6 IE7能识别。触发IE浏览器的haslayout，用于解决IE下的浮动问题*/
}
他就是利用:after在元素内部插入元素块，从而达到清除浮动的效果。
和BFC撑开空间有什么区别？
BFC会形成独立空间，让元素内部内容与区域外部无关。而上述方法是添加一个父容器能感知到的元素从而让它被撑开。
本教程版权归作者和饥人谷所有，转载须说明来源！
网友评论