1. 浮动带来的影响:如果子元素浮动了,就脱离标准流不占位,此时的子元素无法撑开没有设置告诉的子元素。
<body>
<div class="father">
<div class="child1"></div>
</div>
</body>
<style>
.father{
border: 2px solid #000;
}
.father .child1{
float: left;
width: 60px;
height: 60px;
background-color: pink;
}
</style>
显示效果:子盒子脱标,父盒子塌陷。
2.清除浮动的方法:
①给父盒子设置高度,
<style>
.father{
width:100px;
height:100px;
border: 2px solid #000;
}
.father .child1{
float: left;
width: 60px;
height: 60px;
background-color: pink;
}
</style>
② 双伪元素清除法
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
③ 给父元素设置overflow:hidden;
不管使用以上那种方法,都清除了浮动给盒子带来的影响。