浮动和保证金崩溃 [英] Floats and Margin Collapse
问题描述
因此，我很难理解浮子可能在其中穿过边距而崩溃的情况，以及这如何影响浮子的位置.我提供了一个页面，该页面似乎在同一页面上显示了两种不同的行为.
so I'm having a hard time understanding the circumstances under which a float can have margins collapse through it and how that affects the position of the float. I've included a page that seems to show two different behaviors in the same page.
红色浮标似乎位于通过其折叠的边距之前，而下方的蓝色浮标似乎具有通过其折叠的边距，然后在这些边距折叠之后进行定位.
The red float seems to be positioned before the margins that collapsed through it, whereas the blue ones down below seem to have the margins collapse through them and then be positioned after those margins have collapsed.
任何帮助将不胜感激.
干杯， 本
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inheritance Tests</title>
<style>
* {
margin: 0px ;
padding: 0px ;
font-family: courier ;
font-size: small ;
}
.test4 {width: 200px; height: 100px; border-style: solid; border-width: 1px;}
.test5 {border: 1px solid red; width: 200px; height: 50px; float: left; }
.floatedRect {
width: 50px ;
height: 50px ;
float: left ;
background-color: #9cf ;
}
.text {
margin: 10px ;
}
</style>
</head>
<body>
<div class="test4">
Normal Flow
</div>
<div class="test5">
Floated
</div>
<div style="margin-top: 100px">
Has a top margin
</div>
<div style="clear: both">
<div class="floatedRect"></div>
<div class="text">some text</div>
<div class="floatedRect"></div>
<div class="text">some text</div>
<div class="floatedRect"></div>
<div class="text">some text</div>
</div>
</body>
</html>
推荐答案
首先，您的代码易于理解. http://jsfiddle.net/gD9PL/
First your code is made easy to understand. http://jsfiddle.net/gD9PL/
现在，您的答案与浮标或利润率下降的主题完全无关.
Now your answer, it has nothing to do with topic of floats or margin collapsing at all.
实际上，您看到的蓝色div向下移动的原因是其包含的div被文本div这一行中的第二个div完全向下推，并且其边距位于顶部.
Actually what you see that blue divs are going downwards its because of the reason that their containing div is altogether pushed downward by second div in the line which is text div and it's having margin top.
如果您将边框设置为1px，那么您会看到与蓝色div不同的颜色(浮动时未按包含div的0px边框的方式进行推送). http://jsfiddle.net/gD9PL/1/
If you put a border of 1px then you see a different that blue divs (which are floated not pushed the way it was with 0px border containing div). http://jsfiddle.net/gD9PL/1/
这篇关于浮动和保证金崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
