如何清除高度坍塌
高度坍塌概念
父元素沒有設(shè)置高，高度自適應(yīng)，子元素浮動后，造成父元素高度為0，成為高度坍塌
圖一 父元素沒有設(shè)置高度，靠子元素?fù)伍_ <!DOCTYPE html> <html><head><meta charset="utf-8"><title>money</title><style>/* 父元素沒有設(shè)置高度，靠子元素?fù)伍_ */.me{background-color: green;width:100px;height: 100px; }#one{border:1px solid #FF7F50; }</style></head><body><div id="one"><div class="me"></div></div></body> </html> 圖二 高度坍塌? 父元素沒有設(shè)置高度，子元素浮動 <!DOCTYPE html> <html><head><meta charset="utf-8"><title>money</title><style>/* 父元素沒有設(shè)置高度，子元素浮動 */.me{background-color: green;width:100px;height: 100px; float:left;}#one{border:1px solid #FF7F50; }</style></head><body><div id="one"><div class="me"></div></div></body> </html>解決方法：
1.給父元素設(shè)置高度
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>money</title><style>.me{background-color: green;width:100px;height: 100px; float:left;}#one{/* 設(shè)置高度 */height:100px;border:1px solid #FF7F50; }</style></head><body><div id="one"><div class="me"></div></div></body> </html>優(yōu)點：代碼少
缺點：父元素固定高度，違背了高度自適應(yīng)的原則，不夠靈活
2.給父元素定義overflow:hidden,zoom:1(針對ie6兼容)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>money</title><style>.me{background-color: green;width:100px;height: 100px; float:left;}#one{border:1px solid #FF7F50; /* 添加overflow */overflow:hidden;}</style></head><body><div id="one"><div class="me"></div></div></body> </html>優(yōu)點：瀏覽器支持，簡單
缺點：當(dāng)子元素有定位屬性時，設(shè)置overflow：hidden;容器意外的部分會被裁剪掉
3.給父元素定義overflow:auto
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>money</title><style>.me{background-color: green;width:100px;height: 100px; float:left;}#one{border:1px solid #FF7F50; /* 添加overflow:auto */overflow:auto;}</style></head><body><div id="one"><div class="me"></div></div></body> </html>4.在子元素末尾添加空的div,并設(shè)置樣式clear: both;? height:0;overflow: hidden;
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>money</title><style>.me{background-color: green;width:100px;height: 100px; float:left;}#one{border:1px solid #FF7F50; }/* 設(shè)置樣式 */#two{clear: both;height:0;overflow: hidden;}</style></head><body><div id="one"><div class="me"></div><!-- 添加新的div并設(shè)置樣式 --><div id="two"></div></div></body> </html>優(yōu)點：所有瀏覽器支持，并且溢出的部分不會被裁剪
缺點：在頁面添加了無意義的div,容易造成代碼冗（rong）余
5.萬能清除浮動法--在父元素內(nèi)容中添加一個偽元素
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>money</title><style>.me{background-color: green;width:100px;height: 100px; float:left;}#one{border:1px solid #FF7F50; }/* 父元素添加偽元素 */#one:after{content:'';height:0;clear:both;overflow: hidden;visibility: hidden;display: block;}</style></head><body><div id="one"><div class="me"></div></div></body> </html>優(yōu)點：不會造成代碼冗余，剩余代碼性能優(yōu)化
總結(jié)
- 上一篇： 阿里巴巴fastjson下载
- 下一篇： C51单片机T0/T1计数器举例