浮动和保证金崩溃答案

【问题标题】：Floats and Margin Collapse浮动和保证金崩溃
【发布时间】：2010-12-14 20:56:28
【问题描述】：

所以我很难理解浮动在哪些情况下可能会导致边距塌陷，以及这如何影响浮动的位置。我添加了一个页面，该页面似乎在同一页面中显示了两种不同的行为。

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

任何帮助将不胜感激。

干杯，本

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

【问题讨论】：

有点难以理解你在问什么。您是否正在尝试解决某个特定问题？您能描述一下您希望在此示例中看到的内容吗？

标签： html css css-float margin collapse

【解决方案1】：

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

现在你的答案，它与浮动或边距折叠的主题完全无关。

实际上，您看到蓝色 div 正在向下移动，因为它们的包含 div 被文本 div 行中的第二个 div 完全向下推，并且它具有顶部边距。

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

【讨论】：

【解决方案2】：

我不确定我是否完全理解这个问题，但我会试一试：

我不相信浮动会折叠边距的时候。我查看了您的代码，但没有看到 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 推到右侧。

希望对您有所帮助。

【讨论】：

【解决方案3】：

也许CSS 2.1 Specification 中的章节8.3.1 Collapsing margins 可以提供帮助？

【讨论】：

这应该是一个评论，因为它实际上并没有解释任何事情

【解决方案4】：

Andy Budd 写了一篇关于 CSS 和折叠边距的文章：

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

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

【讨论】：