经常在各种前端面试题中出现,今天就将原本CSDN博客上总结的清除浮动的方式再次回顾并且搬运过来

1

定义伪类清除

1
2
3
4
5
6
7
.clearfloat:after { 
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0
}

2

定义空div进行clear

1
2
3
.clearfloat { 
clear: both
}

3

为父元素设置高度

1
2
3
4
5
.div1 {
background: #000080;
border: 1px solid red;/*解决代码*/
height: 200px;
}

4

为父元素设置overflow:hidden

1
2
3
4
5
.div1 {
background: #000080;
border: 1px solid red;/*解决代码*/
width: 98%;
overflow: hidden}
5

父元素一并浮动

1
2
3
4
5
6
7
.div1 {
background: #000080;
border: 1px solid red;/*解决代码*/
width: 98%;
margin-bottom: 10px;
float: left
}