我有以下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