為什么我的兩個(gè)div是并排的,div不是塊級(jí)元素嗎
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實(shí)踐題 - 選項(xiàng)卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? ? ul{
? ? ? ? ? list-style:none;
? ? ? ? ? ?margin:0;
? ? ? ? ? ?padding:0;
? ? ? }
? ? ? ul>li{
? ? ? ? ? ?float:left;
? ? ? ? ? ?width:90px;
? ? ? ? ? ?height:42px;
? ? ? ? ? ?border:1px solid grey;
? ? ? ? ? ?margin:0 5px;
? ? ? ? ? ?line-height:40px;
? ? ? ? ? ?border-bottom:none;
? ? ? ? ? ?text-align:center;
? ? ? }
? ? ? ?
? ? </style>
? ? <script type="text/javascript">
? ? ? ? ?
? ? // JS實(shí)現(xiàn)選項(xiàng)卡切換
? ??
? ??
? ? </script>
?
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div>
? ? <ul>
? ? ? ? <li>房產(chǎn)</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手貨</li>
? ? </ul>? ??
</div>
<div>
? ? 275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居
? ? 200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)
? ? 北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平
? ? 京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房
</div>
?
</body>
</html>
2022-09-30
DIV確實(shí)是塊級(jí)元素,獨(dú)立一行顯示
F12--元素 可以看到,你的第一個(gè)DIV實(shí)際高度為0,第二個(gè)DIV才有真實(shí)高度
原因在哪里呢?將添加在li上的浮動(dòng)屬性去掉就恢復(fù)正常了

造成這個(gè)現(xiàn)象的原因是元素浮動(dòng)Float后會(huì)脫離標(biāo)準(zhǔn)文檔流,所以第一個(gè)DIV沒(méi)有被撐開(kāi),詳細(xì)原理看鏈接https://blog.csdn.net/Czc1357618897/article/details/122980847