<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>正确解决高度塌陷</title> <style media="screen"> .box { border: 1px solid; } .float { width: 100px; height: 100px; background: skyblue; float: left; } .clearfix:after { content:''; clear: both; display:block; } </style> </head> <body> <div class="box clearfix"> <div class="float"> </div> </div> </body> </html>
补充:
一, float 使父元素高度坍塌的原因 :
子元素使用 float 后,使其脱离文档流 。 使父元素检测不到其尺寸。
二,5种解决方案 :
1,为父元素设置高度 , 缺陷是 :不灵活
2,为父元素设置 float , 缺陷是 :使父元素也脱离,没有真正解决
3,为父元素设置 overflow:hidden , 缺陷是 :会隐藏相关的元素
4,子元素后面添加 一个 clear:both 的 兄弟元素 , 缺陷是 : 使 html 添加了一个多余的结构
5,为父元素添加一个 content:"";clear:both;display:block 的伪类 。 ( 可取 )