課程
/前端開發
/HTML/CSS
/CSS深入理解之float浮動
在上一個塊元素中加上浮動,下一個塊元素清除浮動并加上margin-top,這里的外邊距為什么沒有展示出來?
2017-01-05
源自:CSS深入理解之float浮動 4-2
正在回答
clear:both是加在父元素內容的底部,你這里都沒有父元素,清除哪個的高度塌陷?
外邊距合并(塌陷)問題
我也不知道這個問題該怎么解釋,但是我在你這2個 div 的上層又添加了一個 div,并設置了 border 后,好像就沒什么問題了。但如果不加這個上層 div 的話,貌似 .clrfloat 的 margin-top 確實是不太正常。
我添加的代碼如下:
<style>
#box {
????border: 1px solid #333;
}
</style>
<body>
????<div id="box">
????????<div class="div00">float</div>
????????<div class="clrfloat">hello</div>
????</div>
</body>
其它的 CSS 代碼跟你的一樣。
ohitisme 提問者
你用的什么瀏覽器?我在最新版火狐上測試是沒有問題的呀。
樣式表里是這樣:
.div00 {
width: 50px;
height: 50px;
float: left;
margin-bottom: 50px;
background-color: blue;
.clrfloat {
margin-top: 200px;
background-color: red;
clear: both;
margin-bottom: 100px;
文檔中的位置是這樣的:
<div class="div00">float</div>
?<div class="clrfloat">hello</div>
兩個div的樣式大致就是這樣,但是上外邊距就一直沒有效果
Hello立國
能把代碼樣式給出嗎
舉報
課程將會從感性的認識的角度講解CSS float屬性,浮動的前世今生
2 回答float和文檔流
2 回答float問題
1 回答圖片文字環繞 align 和 float 有區別嗎?
1 回答float的濫用???
1 回答float與display屬性
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2019-04-05
clear:both是加在父元素內容的底部,你這里都沒有父元素,清除哪個的高度塌陷?
2017-08-03
外邊距合并(塌陷)問題
2017-01-06
我也不知道這個問題該怎么解釋,但是我在你這2個 div 的上層又添加了一個 div,并設置了 border 后,好像就沒什么問題了。但如果不加這個上層 div 的話,貌似 .clrfloat 的 margin-top 確實是不太正常。
我添加的代碼如下:
<style>
#box {
????border: 1px solid #333;
}
</style>
<body>
????<div id="box">
????????<div class="div00">float</div>
????????<div class="clrfloat">hello</div>
????</div>
</body>
其它的 CSS 代碼跟你的一樣。
2017-01-06
你用的什么瀏覽器?我在最新版火狐上測試是沒有問題的呀。
2017-01-06
樣式表里是這樣:
.div00 {
width: 50px;
height: 50px;
float: left;
margin-bottom: 50px;
background-color: blue;
}
.clrfloat {
width: 50px;
height: 50px;
margin-top: 200px;
background-color: red;
clear: both;
margin-bottom: 100px;
}
文檔中的位置是這樣的:
<div class="div00">float</div>
?<div class="clrfloat">hello</div>
兩個div的樣式大致就是這樣,但是上外邊距就一直沒有效果
2017-01-06
能把代碼樣式給出嗎