Css 盒子塌陷
1.盒子塌陷的原因
????????在構建頁面的時候需要使用到一些盒子模型來完成我們對頁面的排版，并且盒子套盒子的情況也是非常常見的，正常情況下如果父盒子沒有設置高度，子盒子會撐開父盒子使父盒子達到子盒子的高度，但是如果子盒子使用了浮動，子盒子就會脫離了文檔流，引起盒子塌陷，絕對定位和固定定位也會引起盒子塌陷。
? ? ? ? 首先，設置一個父div和一個子div，其中父盒子不設置高度，子盒子高寬都設置
html: <body><div class="one"><div class="two"></div></div> </body> </html> css: *{margin: 0px;padding: 0px; } .one{width: 300px;margin-left: 50px;background-color: aquamarine; } .two{width: 100px;height: 100px;background-color: rgb(210, 70, 70); }正常情況下結果：父盒子沒有設置高度，它的高度就是子盒子的高度
?1.給子盒子設置浮動，結果就只有子盒子存在，父盒子由于沒有元素支撐沒有顯示
.two{width: 100px;height: 100px;float: left;background-color: rgb(210, 70, 70); }?2.給子盒子加上絕對定位，一樣會導致盒子塌陷，為什么呢？
因為絕對定位也是脫離文檔流，絕對定位是相對于存在定位屬性的父元素進行偏移，父元素無定位則順推至祖先元素判斷是否存在定位，若存在則相對于祖先元素進行偏移，若不存在則以此類推直至無祖先元素，若無父元素，則相對于瀏覽器進行偏移，由于父元素本身沒有高度而不會有空間存在，所以就會相對于瀏覽器偏移，進而導致盒子塌陷。
.two{width: 100px;height: 100px;position: absolute;/* float: left; */background-color: rgb(210, 70, 70); }?3.給盒子加上固定定位，結果也是如此，為什么呢？
因為固定定位也是脫離文檔流，是相對于瀏覽器窗口進行偏移，定位參照點跟父元素沒有關系。
?2.如何清除盒子塌陷呢？
1.給每個盒子的寬高都寫死，大小合適為止
- 優(yōu)點：簡單方便
- 缺點：非自適應，瀏覽器的窗口大小直接影響用戶體驗。
2.給父盒子也添加浮動，讓其也脫離標準文檔流。
- 優(yōu)點：方便；
- 缺點：對頁面的布局不是很友好，不易維護。
??
3.?給父盒子添加overflow:auto;或者overflow:hidden;。
使用overflow: hidden時，實際上就創(chuàng)建了一個塊級格式化上下文，該塊級格式化上下文決定了height:auto（不設置height時，其默認值為auto）是如何計算的。
計算塊級格式化上下文的高度時，浮動元素也參與計算。因此，父元素在計算其高度時，加入了浮動元素的高度，就達到了清理浮動的效果。
?4.父盒子里最下方引入清除浮動塊
clear:both;是使它所在的塊元素周圍不允許有浮動，所有也可以起到消除塌陷的作用
不過單獨添加一個清除浮動塊有點冗余了
<body><div class="one"><div class="two"></div><div class="three"></div></div> </body> .one{width: 300px;margin-left: 50px;background-color: aquamarine; } .two{width: 100px;height: 100px;float: left;background-color: rgb(210, 70, 70); } .three{clear: both; }5、為外部盒子添加after偽類，設置clear屬性清除浮動。
zoom：1；作用：設置或檢索對象的縮放比例，觸發(fā)IE瀏覽器的haslayout屬性，解決浮動, margin重疊等一些問題。
.one::after{content: '';clear: both;display: block;zoom: 1; }?
總結
- 上一篇： 如何将图一-1变成图1-1(word题注
- 下一篇： 几类常用Case工具介绍