子div使用float 後如何撐開父div
阿新 • • 發佈：2019-02-01
當div1裡面巢狀一個div2時，div2設定float，那麼div1是無法被撐開的，原因可以理解為他們不再同一層，div2漂浮在div1上，導致div2撐不開div1。
以上是效果圖
<style type="text/css">
#lside{
width: 200px;
height: 100px;
background:red;
float: left;
}
#rside{
width: 200px;
height: 200px;
background: blue;
float: left;
}
#center{
width: 600px;
background: grey;
}
</style>
<body>
<div id="center">我在中間
<div id="lside">我是左</div>
<div id="rside">我是右</div>
</div>
</body>
這是程式碼，
為了解決上述問題有2中方法：
1、在浮動容器結束後加上以下程式碼；<div style="clear:both;"></div>；意思是清除浮動；
<body>
<div id="center">我在中間
<div id="lside">我是左</div>
<div id="rside">我是右</div>
<div style="clear:both;"></div>
</div>
</body>
效果圖：
2、在外層<div id="center">的css程式碼加入overflow：auto；
建議大家使用第一種方法，浮動用完之後就消除浮動，因為浮動有繼承特性。