css--父元素塌陷
阿新 • • 發佈：2017-09-09
itl pen left ide ctype alt code -1 更改 
當父元素內都是漂浮元素時，會造成父高度塌陷的問題。(因為等同於父元素內容為空，所以長，寬都等於空)
我們想要的頁面結構是：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .son1{ width: 100px; height: 100px; background父元素塌陷-color: red; float: left; } .son2{ width: 100px; height: 100px; background-color: green; float: left; } .p2{ width: 100%; height: 100px; background-color: yellow; } </style> </head> <body> <div class="p1"> <div class="son1"></div> <div class="son2"></div> </div> <div class="p2"></div> </body> </html>
這時候，我們想既然父元素為空，導致了高度塌陷，那麽就給父元素填充點文本內容。
<div class="p1">123 <div class="son1"></div> <div class="son2"></div> </div>
雖然黃色模塊向下移動了，但是並沒有達到我們想要的效果。我們想給父元素設置一個固定的長度和寬帶。
<div class="p1" style="height: 100px;width: 100%"> <div class="son1"></div> <div class="son2"></div> </div>
看效果，已經達到我們預期了。但是這個解決方案真的好嗎？答案明顯是否定的。當懸浮模塊大小發生改變時,我們需要再手動更改父元素的長寬，這十分不方便。
這時候,我們想到了clear,他會讓元素周邊不會有懸浮元素，可以達到塊標簽的效果。
我們需要先在父元素中創建一個空白塊元素(div)。再給他設置clear屬性。就可以達到效果了
<div class="p1"> <div class="son1"></div> <div class="son2"></div> <div style="clear: both"></div> </div>
css--父元素塌陷