面试中长问BFC 和 margin-top 重叠的问题
- 常见问题都知道, 浮动的儿子有高度, 而父亲不会撑开
- 谁都知道, 但是为什么呢? 再看
- 有其他儿子, 但是不是浮动的, 他就有高度,
- 而浮动的儿子依然没被撑开
- 学过都知道是浮动脱离文档流
- 还有上下margin重叠时, 只显示最大margin
来解释一下这些问题
- margin问题, 通过stackoverflow, 得到一个很好的解释
- 首先margin虽然可以去移动元素, 但是要清楚, margin是外边距, 他是给盒子外面加空白区域用的
- 然后我们要知道一个盒子没有margin, boeder, padding时他是没有边界的, 即使我们加了背景色看到他的边界, 但是你可以想象他是一块空地, 并没有围墙
- 所以你想我们上下盒子加margin时, 他就是上下加空白, 都有最大的空白了, 还需要两个加一起???
- 还有儿子到的margin-top给了父亲, 这是因为他没有边界啊, 父亲如果加了margin, boeder, padding, 有了边界他就不出去了, 他加空白的相对位置变了
- 发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。
为啥左右不重叠, 这随便搜, 你就知道了
作者：Kinice 链接：www.zhihu.com/question/44… 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
查阅w3c文档和多种资料后，我认为原因如下：css在最初设计时，目标是为html文档排版，类似于word文档。
而块级元素近似对应了word中的段落，上下margin就是段间距，段间距的表现应当与设置的值一致，就有了 margin 塌陷 这种设定，就是如果两个块级margin部分直接接触，则取两部分中较大的部分作为段间距。
注意，不只是相邻元素有这种情况，父子元素也会。这里可以看出，当初设计css时，很多当时不会出现的情况并不会考虑进去，比如元素嵌套时的表现等。并且规则设定也简单粗暴，与之相似的令人头疼的规则有很多都保留到了现在。
BFC他是w3c一个规定
- 就是一个区域, 每个bfc区域独立
- 并且他有将浮动元素算在内部的特性
- 所以触发他就能解决父元素噶度塌陷
需要就触发他:
