CSS - 正确解决 float 高度坍塌的问题
<!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 的伪类 。 （ 可取 ）
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18