0

所以我很难理解在什么情况下浮动可能会导致边距崩溃，以及这如何影响浮动的位置。我已经包含了一个页面，该页面似乎在同一页面中显示了两种不同的行为。

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

任何帮助将非常感激。

干杯，本

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

4 回答 4

2

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

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

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

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

于 2012-02-17T16:13:44.017 回答
1

I'm not sure I completely understand the question, but I'll take a stab at it:

I don't believe that there is a time where a float will collapse a margin. I've looked at your code and I don't see any margin set in the css that then is 'collapsed' when I view it in a browser (I'm using Safari).

Here's my thoughts:

In the first part of your example, you have the normal flow div before the floated div. The floated div will just be rendered below the normal flow div.

In the second part of your example you have the floatedRect divs above the normal flow divs. That's when you see the text move to the right. This is not affecting the margin of the text divs or collapsing the margins. It is just allowing the text to 'float' around the floatedRect divs. I've changed your code to illustrate:

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

Notice that the text divs have a 10px margin still, but the text has been pushed to the right by the floatedRect divs.

Hope that helps.

于 2009-11-10T03:46:51.143 回答
1

也许CSS 2.1 规范中的第8.3.1 章折叠边距会有所帮助？

于 2009-11-10T09:46:36.310 回答
0

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

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

尽管日期为 2003 年，但基本原则仍然适用。我发现这篇文章是一个有用的复习。

于 2011-01-05T21:17:31.960 回答