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

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>??

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

轉(zhuǎn)載于:https://www.cnblogs.com/jinzhao/p/3451717.html

總結(jié)

以上是生活随笔為你收集整理的伟大的塌陷的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。