【CSS-3你知多少】重叠边距问题如何解决？--BFC块级格式化上下文
时间：2023-03-30 13:23:52
CSS
#sec{background-color:red;}.child{高度：100px；顶部边距：10px；背景：黄色；}1。边距重叠示例父子元素边距重叠#sec{background-color:red;}.child{高度：100px；顶部边距：10px；背景：黄色；}问题：有时候当我们设置子元素的margin-top，但是却发现子元素没有上边距的效果，但父元素具有上边距的效果。原因：重叠边距，一个框及其后代具有重叠边距。根据规范，如果一个盒子没有添加BFC，它的上边距应该与文档流中第一个子元素的上边距重叠。兄弟元素边距重叠1
2
3
这里粉色间距为25px。问题：如果一个元素A的bottommargin是25px，它的兄弟元素B的topmargin是5px，那么两者合起来就是25px（取最大值）。原因：兄弟元素的外边距重叠，取重叠的最大值。与浮动元素内容重叠
问题：右边的元素.right覆盖了红色的背景色。原因：右侧元素.right与左侧浮动元素.left的框重叠。2、BFC解决了重叠边距的问题BFC定义：BFC（Blockformattingcontext）直译为“块格式化上下文”。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部Block-levelBox如何布局，与该区域外部无关。解决父子元素边距重叠问题
#sec{background-color：#f00；溢出：隐藏；}.child{height:100px;顶部边距：10px；背景：黄色；}原理：BFC是页面上一个独立的容器，父子/外部和内部互不影响。解决兄弟元素边距重叠1
2 3
粉色边距从上到下分别为5,30,30,25。原理：BFC垂直边距不会重叠。解决与float元素内容重叠
