Html 浮动和保证金崩溃_Html_Css_Css Float_Margin_Collapse

Html 浮动和保证金崩溃

html css

Html 浮动和保证金崩溃,html,css,css-float,margin,collapse,Html,Css,Css Float,Margin,Collapse,因此，我很难理解在什么情况下浮动会导致利润率崩溃，以及这会如何影响浮动的位置。我已经包含了一个页面，它似乎在同一页面中显示了两种不同的行为红色浮标似乎位于通过它塌陷的边缘之前，而下面的蓝色浮标似乎使边缘通过它们塌陷，然后在这些边缘塌陷之后进行定位任何帮助都将不胜感激干杯，本遗传测试 * { 边际：0px；填充：0px；字体系列：信使；字体大小：小； } .test4{宽度：200px；高度：100px；边框样式：实心；边框宽度：1px；} .test5{边框：1px实心红色；

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

红色浮标似乎位于通过它塌陷的边缘之前，而下面的蓝色浮标似乎使边缘通过它们塌陷，然后在这些边缘塌陷之后进行定位

任何帮助都将不胜感激

干杯，本


遗传测试
* { 
边际：0px；
填充：0px；
字体系列：信使；
字体大小：小；
}
.test4{宽度：200px；高度：100px；边框样式：实心；边框宽度：1px；}
.test5{边框：1px实心红色；宽度：200px；高度：50px；浮动：左侧；}
.浮漂{
宽度：50px；
高度：50px；
浮动：左；
背景色：#9cf；
}
.文本{
利润率：10px；
}
正常流量
漂浮
有最高的利润率
一些文本
一些文本
一些文本

我不确定自己是否完全理解这个问题，但我想尝试一下：

我不相信有一段时间浮动会使保证金崩溃。我看过你的代码，在css中没有看到任何边距集，当我在浏览器中查看它时（我使用的是Safari），这些边距集会被“折叠”

以下是我的想法：

在示例的第一部分中，在浮动div之前有普通flow div。浮动div将仅在普通flow div之下渲染

在示例的第二部分中，浮点数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>


遗传测试
* { 
边际：0px；
填充：0px；
字体系列：信使；
字体大小：小；
}
.test4{宽度：400px；高度：100px；边框样式：实心；边框宽度：1px；}
.test5{边框：1px实心红色；宽度：200px；高度：50px；浮动：左侧；边距：10px；}
.浮漂{
宽度：50px；
高度：50px；
浮动：左；
背景色：#9cf；
}
.文本{
边距：10px；边框：1px实心红色；位置：相对；z指数：1；
}
漂浮
正常流量
有最高的利润率
一些文本
一些文本
一些文本

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

希望这能有所帮助。

我不确定自己是否完全理解这个问题，但我想尝试一下：

以下是我的想法：

在示例的第一部分中，在浮动div之前有普通flow div。浮动div将仅在普通flow 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>


遗传测试
* { 
边际：0px；
填充：0px；
字体系列：信使；
字体大小：小；
}
.test4{宽度：400px；高度：100px；边框样式：实心；边框宽度：1px；}
.test5{边框：1px实心红色；宽度：200px；高度：50px；浮动：左侧；边距：10px；}
.浮漂{
宽度：50px；
高度：50px；
浮动：左；
背景色：#9cf；
}
.文本{
边距：10px；边框：1px实心红色；位置：相对；z指数：1；
}
漂浮
正常流量
有最高的利润率
一些文本
一些文本
一些文本

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

希望能有帮助。

可能会有帮助？

安迪·巴德写了一篇关于CSS和折页边距的文章：

即使是2003年，基本原则仍然适用。

我发现这篇文章是一篇有用的复习文章。

安迪·巴德写了一篇关于CSS和折页边距的文章：

即使是2003年，基本原则仍然适用。

我发现这篇文章是一个有用的复习工具。

首先，您的代码很容易理解

现在你们的答案是，这和浮动或保证金崩溃的话题毫无关系

实际上，你看到蓝色的div向下移动，因为它们的包含div被第二个div向下移动，第二个div是text div，它有页边空白

如果将边框设置为1px，则会看到不同的蓝色div（浮动的div与包含div的0px边框的方式不同）

首先，您的代码很容易解压