我有以下code,其中a
和b
div块分别在左侧和右侧。为什么我的div与我的代码中的其他div重叠?
<!--HTML-->
<div style="background-color:#125467" id="a">a</div>
<div style="background-color:#AABBFF" id="b">b</div>
<div style="background-color:#990033" id="c">c</div>
<div style="background-color:#885544" id="d">d</div>
<div style="background-color:#7799BB" id="e">e</div>
<div style="background-color:#33FF88" id="f">f</div>
<div style="background-color:brown" id="g">g</div>
<div style="background-color:blue" id="h">h</div
/*CSS*/
div {
width: 100px;
height: 100px;
color: white;
text-align: center;
font-size: 20px;
}
* {
border: 1px black dashed
}
#a {
float:left;
}
#b {
float:right;
}
的问题是,我不明白为什么d
块重叠c
块像下面的图片:
但其它组件通常去。我知道如果我加
#c {
clear: both;
}
一切都会好的。
但为什么没有clear:both
它的行为是这样的?
整个问题是浮动对象不会添加到它们正确驻留的对象的高度。 https://css-tricks.com/the-how-and-why-of-clearing-floats/ – Lain
为什么不添加块d的类? – Alex