BFC
BFC（Block Formatting Context）叫做“块级格式化上下文"
布局规则如下：
1.内部的盒子会在垂直方向，一个个地放置；
2.盒子垂直方向的距离由margin决定， 属于同一个BFC的两个相邻Box的上下margin会发生重叠；
4.BFC的区域不会与float重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算BFC的高度时，浮动元素也参与计算。
介绍过了BFC的布局规范，再来说说哪些元素会产生BFC。
1.根元素；
2.float的属性不为none；
3.position为absolute或fixed；
4.display为inline-block，table-cell，table-caption，flex；
5.overflow不为visible
IFC
IFC（inline Formatting Context）叫做“行级格式化上下”
局规则如下：
1.内部的盒子会在水平方向，一个个地放置；
2.IFC的高度，由里面最高盒子的高度决定；
3.当一行不够放置的时候会自动切换到下一行；
双边距bug
出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说，并不是只有块状元素左浮动，且具有左外边距时才有这个BUG，当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug。
两个块级元素分别加上margin-top和margin-bottom只取最大值
给一个div加上margin-bottom：100px另一个加上margin-top:200px 问这两个相距多少px?
取值大的答案是200px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;height: 200px;
background: #198;
}
</style>
</head>
<body>
<div style="margin-bottom: 100px"></div>
<div style="margin-top: 200px;"></div>
</body>
</html>很明显，两个div之间的距离只有200px;这是w3c规定的，但是这有什么意义呢？
当然有意义，比如几个段落，p标签是有默认margin 的，谷歌是16px，将两个边距合并，每个段落的边距就都是一样了。
当然，只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
————————————————
原文链接：https://blog.csdn.net/zfz5720/article/details/79917272
HTML:margin塌陷现象的解决
设置子元素的margin，父元素也具有与子元素相同的margin值，称之为塌陷现象。这种现象我们称之为margin的塌陷现象。具体说就是子类标签设置margin-top:50px;时，不是子类标签距离父类标签上边框50像素。而是子类标签和父类标签距离上级标签50个像素。
解决方案：
方法一：在父类标签设置overflow：hidden；属性
方法二：给父类标签设置border属性即可。
方法三：给父元素定位也可以(position属性)
总结：
这些问题面试经常会问到，所以记录一下。
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
