Skip to main content

CSS浮动清除浮动对父元素高度的影响

· 预计阅读时间：1 分钟
摘要

本篇将简单讲讲浮动的特性，当我们给子元素设置浮动时对父元素高度的影响，以及怎么清除浮动

1、浮动float的特性#

浮动元素是同时处于常规流内和流外的元素。其中块级元素认为浮动元素不存在，而浮动元素会影响行内元素的布局，浮动元素会通过影响行内元素间接影响了块元素的布局。

（1）、浮动元素不会覆盖文字内容

（2）、浮动元素不会覆盖图片内容

（3）、浮动元素不能覆盖表单元素

（4）、浮动不压边框不压父元素的内边距

（5）、浮动元素在排列时只参考前一个元素的位置即可

2、设置浮动#

float: none | left |right

3、清除浮动#

3.1、使用带clear属性的空元素#

在浮动元素后使用一个空元素如<div class="clear"></div>并在CSS中设置 .clear{clear:both;}样式属性即可清理浮动。

.test {  background-color: gray;  border: solid 1px #000;}
.test img {  float: left;}
.test p {  float: right;}
.clear {  clear: both;}
<div class="test"><img src="test.jpg" /><p>测试</p><div class="clear"></div></div>

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

3.2、使用CSS的overflow属性#

给浮动元素的容器(父元素)添加overflow:hidden;或overflow:auto;可以清除浮动

另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

.test {  background-color: gray;  border: solid 1px black;  overflow: hidden;  *zoom: 1;}
.test img {  float: left;}
.test p {  float: right;}

3.3、给浮动的元素的容器（父元素）添加浮动#

给浮动元素的容器（父元素）也添加上浮动属性即可清除内部浮动，但是这样会影响整体布局，不推荐使用。

3.4、使用CSS的:after伪元素#

结合 :after 伪元素（注意：这不是伪类，而是伪元素，代表一个元素之后最近的元素）可以完美兼容当前主流的各大浏览器。 给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.test {  background-color: gray;  border: solid 1px black;}
.test img {  float: left;}
.test p {  float: right;}
.clearfix:after{  content: "";   display: block;   height: 0;   clear: both;   visibility: hidden;  }
.clearfix {  zoom: 1; }
<div class="test clearfix"><img src="test" /><p>test</p></div>

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

文章目录