我们简单总结下清除浮动的几种方式:
首先我们得明白,如下布局,如果不清除浮动,那将会怎样:class为one的盒子将会和父级盒子部分重合在一起,且父级盒子无法被子级撑开。那我们要清除浮动达到的效果就是:父级盒子被撑开,下面的盒子不会重叠在一起。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
border: 1px solid blue;
/** 方式二:父级加overflow:hidden清除,*/
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background: red;
float: left;
}
.one {
width: 100px;
height: 200px;
background: green;
}
/** 方式三:在父级元素加伪类元素清除浮动(推荐使用) */
.clear:after {
content: "";
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden; /*将元素隐藏起来*/
/*在页面的clearfix元素后面添加了一个空的块级元素(这个元素的高为0,行高也为0,并且这个元素清除了浮动)*/
}
</style>
</head>
<body>
<div class="father clear">
<div class="son"></div>
</div>
<!--方式一:增加额外的一个盒子来清除浮动-->
<!--<div style="clear: both"></div>-->
<div class="one"></div>
</body>
</html>
如代码上面:
方式1:在父元素盒子后面增加一个空盒子:clear:both清除浮动,浮动的影响虽然清除了,但是父盒子的高度没有办法撑开,而且还增加了没有必要的标签,
方式二:用overflow:hidden清除,这种清除的弊端是当父元素块里面的内容确实多余了父元素时,那多出的部分将会被隐藏,所以这种方式只有特定的时候才能用,比如内容不会溢出父元素。
方式三:增加伪元素,如上面所述。推荐使用这种方式