div內部巢狀div時,高度設定問題
阿新 • • 發佈:2019-01-29
問題
當div內部巢狀多個div,內部div設定浮動時,父級div的高度受影響,無法計算,外層div會變成一條水平線!
程式碼結構如下:
<div class="outer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
如圖所示:
解決方法1:
在內層div的後面新增一個div,清除浮動
<div class="outer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- 新增-->
<div style="clear:both"></div>
</div>
解決方法2:
給父元素新增一個屬性
overflow:hidden;
<div class="outer" style="overflow:hidden;"> <!--修改-->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
效果圖