浮动的影响是啥:
如果父盒子没有设置高度,并且是由子盒子的内容撑开的,当子盒子设置浮动时,父盒子高度为0,且下面的元素会自动部位,造成影响。
1 在浮动没有宽高的盒子后在加一个清除浮动的div
.father {
width: 200px;
border: 5px solid blue;
}
.son {
width: 100px;
height: 100px;
background: red;
float: left;
}
<div class='father'>
<div class='son'></div>
</div>
<div class='' style='clear:both'></div>
<div class='one'></div>
缺点:浮动的影响虽然清除了,但是父盒子的高度没有办法撑开,而且还增加了没有必要的标签。父盒子的高度不存在。
2 overflow清除浮动
在父元素中设置overflow:hidden
.father {
width: 200px;
border: 5px solid blue;
overflow:hidden;
}
.son {
width: 100px;
height: 100px;
background: red;
float: left;
}
特点:清除浮动,且把父元素的内容撑开
3 使用伪元素clearfix:after来清除浮动,给父元素添加clearfix类
.clearfix:after{
content:"";
height:0;
line-height:0;//不是必要
display:block;
visibility:hidden;
clear:both;
}
.clearfix{
zoom:1; //解决IE兼容问题
}
4 双伪元素,父元素添加clearfix样式,一下两种写法均可
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}