使用float之后清除浮动的两种方法

参加了百度前端技术学院2016的春季线上培训。
这是我第二次参加,上一次参加是在2015年的夏天,参加了夏季的学习,但是效果不是很好,因为当时只是暑假学了一点点就开始搞Java的后端,而且确实一直在玩,就错过了。之前组的队兴致也不是很好,这次的组队我直接拉了班上一样对前端感兴趣的同学来参加,应该不会像去年那样半途而废了吧。恩,我不会放弃的。


float

CSS的float属性可以让一个元素脱离正常的文档流,然后会移动到所在容器的左右端(看浮动方向)。而且容器内的其它文本和行内元素会围绕它安放。
如果是在容器元素的高度比浮动元素高的时候,是没有什么问题的,但是如果相反,容器元素的高度比浮动元素的高度要小,则会出现意外的情况,比如浮动元素会突出容器元素。

在这里,我用经典的三栏式自适应布局来说明。

1
2
3
4
5
6
7
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="middle">
<p>中间中间中间</p>
</div>
</div>

在这里我们使用浮动来布局,CSS如下:

1
2
3
4
.content{ background-color: #eee; padding: 20px; }
.left{ float: left; width: 100px; height: 100px; background-color: #026;}
.right{ float: right; width: 200px; height: 200px; background-color: #706;}
.middle{ margin: 0 210px 0 110px; border: 1px solid #222;}

这个时候你会发现,content容器的高度小于浮动元素,浮动元素会出现在容器之外。那如何才能使得容器的高度随着浮动元素的高度变化呢?

两种方法:

clear

清除浮动最简单的就是在浮动元素的下一个元素的css中使用clear,来清除浮动。但是这种简单的方法也有局限性,因为如果在浮动元素的兄弟元素上使用clear,就会使得这个兄弟元素出现在浮动元素的下栏,也就是说,会跟浮动元素不在一行上。

1
clear: both;

在容器元素的结束标签之前加上一个div,并设置css:`clear: both;`

overflow

第二种方法就是使用overflow来伸展容器元素。设置容器元素:

1
2
overflow: hidden;
height: auto;

clearfix

前两个方法都有一定的局限性,clear会使得兄弟元素出现在浮动元素的下栏,overflow会使得其它的一些样式失效。如果页面要求这两个局限性都不能出现,那可以使用最后一种方法。

1
2
3
4
5
6
7
8
9
.content:after{
content: "";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
font-size: 0;
}

真有意思