Question

所以我很难理解浮动可以让边缘通过它崩溃的情况以及它如何影响浮动的位置。我已经包含了一个似乎在同一页面中显示两种不同行为的页面。

红色浮子似乎位于通过它折叠的边缘之前，而下方的蓝色浮动似乎让边缘通过它们折叠，然后在这些边缘折叠后定位。

非常感谢任何帮助。

干杯，本

<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>

Answer 1

8.3.1 Collapsing margins中的CSS 2.1 Specification章可能有帮助吗？

Answer 2

首先，您的代码易于理解。 http://jsfiddle.net/gD9PL/

现在你的答案，它与浮动或边缘崩溃的主题无关。

实际上你看到蓝色div正在向下移动它的原因是它们包含的div被文本div中的第二个div完全向下推，并且它的边缘是顶部。

如果你设置一个1px的边框，那么你会看到一个不同的蓝色div（浮动不会像0px边框包含div那样被推动）。 http://jsfiddle.net/gD9PL/1/

Answer 3

我不确定我是否完全理解这个问题，但我会抓住它：

我不相信有一个浮动会崩溃边缘的时间。我查看了你的代码，当我在浏览器中查看时，我没有在css中看到任何设置为“折叠”的边距（我正在使用Safari）。

这是我的想法：

在您的示例的第一部分中，您在浮动div之前有正常的流div。浮动的div将被渲染到正常的流量div之下。

在您的示例的第二部分中，您将floatedRect div高于正常的流div。那时你看到文字向右移动了。这不会影响文本div的边距或折叠边距。它只是允许文本在floatedRect div周围“浮动”。我已经更改了您的代码来说明：

<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: 400px; height: 100px; border-style: solid; border-width: 1px;}
    .test5 {border: 1px solid red; width: 200px; height: 50px; float: left; margin:10px; }

        .floatedRect {
            width: 50px ;
            height: 50px ;
            float: left ;
            background-color: #9cf ;
        }

        .text {
            margin: 10px; border:1px solid red; position:relative; z-index:1;
        }
    </style>
</head>
<body>


    <div class="test5">
            Floated
    </div>

     <div class="test4">
            Normal Flow
    </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>

请注意，文本div仍有10px的余量，但文本已被floatedRect div推到右侧。

希望有所帮助。

Answer 4

Andy Budd写了一篇关于CSS和崩溃利润的文章：

http://andybudd.com/archives/2003/11/no_margin_for_error/

即使在2003年，基本原则仍然适用。我发现这篇文章是一个有用的复习。

浮动和保证金崩溃

4 个答案: