在設計網頁布局時，有一個很蛋疼的問題，那就是使用浮動（float）時的父容器塌陷問題。
先說一下什么是塌陷：
塌陷：父元素只包含浮動元素，那么它的高度就會塌縮為零（前提就是你們沒有設置高度（height）屬性，或者設置了為auto。就會出現這種情 況，當然不是所用的瀏覽器都是這樣的，在IE8下面沒有這種情況。）如果父元素不包含任何的可見背景，這個問題會很難被注意到，但是這是一個很重要的問 題。
先看看代碼

Css代碼 ?

.body{??

????????width:900px;??????

????????background-color:#556677;???

????????margin:0?auto;???//為了居中??

????????height:auto;??

????????}??

????????.test{??

????????border:?5px?solid?#126121;??

????????float:?left;??

????????height:?200px;??

????????margin-left:?18px;??

????????margin-top:?40px;??

????????width:?150px;??

????????}??

Html代碼
??????????????

Html代碼 ?

<div?class="body">??

????????<div?class="test">111</div>???????

????????<div?class="test?">222</div>??????

????????<div?class="?test?">333</div>??

????????<div?class="?test?">444</div>??

????????<div?class="?test?">555</div>??

????</div>??

這樣的話，在fireFox、chrome下是沒有body的#556677顏色。并不是沒有上色。你查看body元素的盒型圖會發現，他的高度為0。這就是塌陷。
解決辦法：
1、在<div class=" test ">555</div>之后加一個<div style="clear:both"></div>，加的這個不影響整個布局。
2、在body元素的屬性中加上overflow:hidden。

轉載于:https://www.cnblogs.com/jinzhao/p/3451717.html

總結

以上是生活随笔為你收集整理的伟大的塌陷的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。