为什么CSS浮动为子元素添加边距？

使用此示例从MDN's Introduction to CSS layout，CSS float为P和H2元素添加边距。这是代码示例：为什么CSS浮动为子元素添加边距？

<h1>2 column layout example</h1> 
<div> 
    <h2>First column</h2> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> 
</div> 

<div> 
    <h2>Second column</h2> 
    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.</p> 
</div>

这是CSS（我加了背景颜色，使其容易看到）：

div:nth-of-type(1) { 
    background-color: blue; 
    width: 48%; 
    float: left; 
} 

div:nth-of-type(2) { 
    background-color: red; 
    width: 48%; 
    float: right; 
}

如果您使用完全相同的代码减去浮动， H2元素没有顶部边界，P元素没有底部边界。有色的DIV紧紧围绕文本。但是，如果确实包含浮动块，则不仅DIV的布局会发生变化（从堆叠到并排，如预期的那样），而且会向H2元素和底部边距添加顶部边距被添加到P元素。您可以清楚地看到，彩色DIV不再紧贴文字在顶部和底部。

我可以删除这些利润很轻松地用：

h2 { 
    margin-top: 0; 
} 

p { 
    margin-bottom: 0; 
}

它很容易固定，但我的问题是，为什么呢？为什么添加浮动会导致不需要的边距自动插入子元素？这种行为是预期的还是期望的？这是一个错误吗？一个特征？对我来说这似乎很奇怪和不可预测。

来源

2017-03-02 AlwaysLearning

缺省情况下有一些margin-top并从h2和p标签浏览器margin-bottom组，并且根据MDN - Mastering margin collapsing

相邻兄弟姐妹的页边距折叠（除了当后来兄弟需要是清除过去的花车）。

...

如果没有边框，填充......倒塌的保证金父之外结束。

...浮动的

页边距和绝对定位的元素不会崩溃。

来源

2017-03-02 00:08:18 Stickers

选择此作为最佳答案，因为它使我得到正确的答案，但从我所知道的情况来看，这不是由于相邻的兄弟姐妹，而是由于“父母和第一个/最后一个孩子”崩溃的边际规则。另外，关于浮动元素和绝对定位元素的注释从不崩溃。现在我懂了。谢谢。 – AlwaysLearning

就在白色CSS之前，您可以重置所有默认浏览器样式。使用一些CSS reseters或

* { 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
}

来源

2017-03-02 00:09:21 SamLife91

@MatheusAvellar **谢谢你!!! **。当我写下一段时间时，_i会在下一次更加注意。_ – SamLife91

太棒了！欢迎来到堆栈溢出！ –

这有什么做用浮漂，而只是与浏览器默认样式，再加上在元素的顶部和底部的“崩溃的边缘”。如果您打开Firefox浏览器开发人员工具，则会出现一个标签为“计算”（或类似的，不确定英文表达式的确切内容）的选项卡，其中包含复选框“brwoser styles”。当您检查时，您会在检查HTML元素时看到浏览器的默认样式。

来源

2017-03-02 00:17:19 Johannes

为什么CSS浮动为子元素添加边距？

回答

相关问题