<!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 的伪类 。 ( 可取 )