為什么我的兩個div是并排的,div不是塊級元素嗎
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</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實現選項卡切換
? ??
? ??
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div>
? ? <ul>
? ? ? ? <li>房產</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手貨</li>
? ? </ul>? ??
</div>
<div>
? ? 275萬購昌平鄰鐵三居 總價20萬買一居
? ? 200萬內購五環三居 140萬安家東三環
? ? 北京首現零首付樓盤 53萬購東5環50平
? ? 京樓盤直降5000 中信府 公園樓王現房
</div>
?
</body>
</html>
2022-09-30
DIV確實是塊級元素,獨立一行顯示
F12--元素 可以看到,你的第一個DIV實際高度為0,第二個DIV才有真實高度
原因在哪里呢?將添加在li上的浮動屬性去掉就恢復正常了

造成這個現象的原因是元素浮動Float后會脫離標準文檔流,所以第一個DIV沒有被撐開,詳細原理看鏈接https://blog.csdn.net/Czc1357618897/article/details/122980847