如何清除高度坍塌
高度坍塌概念
父元素没有设置高，高度自适应，子元素浮动后，造成父元素高度为0，成为高度坍塌
图一 父元素没有设置高度，靠子元素撑开 <!DOCTYPE html> <html><head><meta charset="utf-8"><title>money</title><style>/* 父元素没有设置高度，靠子元素撑开 */.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> 图二 高度坍塌 父元素没有设置高度，子元素浮动 <!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; }</style></head><body><div id="one"><div class="me"></div></div></body> </html>解决方法：
1.给父元素设置高度
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>money</title><style>.me{background-color: green;width:100px;height: 100px; float:left;}#one{/* 设置高度 */height:100px;border:1px solid #FF7F50; }</style></head><body><div id="one"><div class="me"></div></div></body> </html>优点：代码少
缺点：父元素固定高度，违背了高度自适应的原则，不够灵活
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>优点：浏览器支持，简单
缺点：当子元素有定位属性时，设置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,并设置样式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; }/* 设置样式 */#two{clear: both;height:0;overflow: hidden;}</style></head><body><div id="one"><div class="me"></div><!-- 添加新的div并设置样式 --><div id="two"></div></div></body> </html>优点：所有浏览器支持，并且溢出的部分不会被裁剪
缺点：在页面添加了无意义的div,容易造成代码冗（rong）余
5.万能清除浮动法--在父元素内容中添加一个伪元素
<!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>优点：不会造成代码冗余，剩余代码性能优化
总结
- 上一篇： 阿里巴巴fastjson下载
- 下一篇： C51单片机T0/T1计数器举例