前端 - margin的问题，那个老哥帮我解释下
问题描述
<!DOCTYPE html><html lang='en'><head> <title>test</title> <style type='text/css'>* { margin: 0; padding: 0;}.a{ height:48px; background: #eee;}.b{ height:520px; background: #ff4949;}.c{ width:90%; height:300px; margin:20px auto; background: #fff;} </style></head><body><p class='a'></p><p class='b'> <p class='c'></p></p></body></html>
p.c 不是应该被红色环绕吗？烦请那个老哥解释下。
问题解答
回答1：因为在BFC中，两相邻（兄弟或父子）、没有边框且没有padding，元素的margin-top与其第一个常规文档流的子元素的margin-top，会产生marign-collapse（外边距折叠）。
你给b加边框，
border: 1px solid transparent;
或者加padding，
padding: 1px 0;
都能消除。
或者，你可以给b加 overflow: hidden;。
可以参考：深入理解BFC和Margin Collapse
回答2：你在.b中添加个overflow: hidden;就可以了。
因为overflow 使用除了 visible 以外的值（hidden，auto，scroll）会触发BFC。什么是BFC？Block Formatting Contexts (块级格式化上下文)具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，上文中的第二类清除浮动的方法（如 overflow 方法）就是触发了浮动元素的父元素的 BFC ，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。
回答3：overflow: hidden; 你把这句话加到 p.b 上。
回答4：搜一下 “子元素margin影响父元素”
回答5：这个叫外边距重叠吧,子级元素的外边距会影响父级元素,并且这两的外边距大整个容器的外边距就以大的为准。这个时候应该选择触发BFC,BFC是什么前面几位说的很清楚了,触发BFC的情况有:
根元素
float属性不为none；
position为absolute或fixed；
display为inline-block, table-cell, table-caption, flex, inline-flex；
overflow不为visible；
解决办法：
如果你给父级加上overflow：hidden,或者加上透明边框就可以解决了。
网公网安备