gpt4 book ai didi

html - float 和 margin 崩溃

转载 作者:太空宇宙 更新时间:2023-11-03 20:24:26 25 4
gpt4 key购买 nike

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

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

任何帮助将非常感激。

干杯,

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

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

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

如果您放置一个 1px 的边框,那么您会看到一个与蓝色 div 不同的蓝色 div(它们是 float 的,而不是像 0px 边框包含 div 那样被插入)。 http://jsfiddle.net/gD9PL/1/

关于html - float 和 margin 崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1705055/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com