清除浮动的五种方法详解

前言：
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。

为什么会使用浮动？
一开始出现浮动只是为了解决文字环绕图片问题，但最后是为了解决几个块级元素并排显示问题，虽然可以使用定义块级元素的display为inline-block（这种方式也不会出现父级元素坍塌问题）但是这种方式不能控制元素的位置而是默认从左到右，所以要实现元素是居左还是居右使用浮动更方便。但是使用了float之后不清除浮动就会出现父级高度塌陷问题。

实例：

HTML代码基本代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动</title><style>#parent{border: 1px solid black;}#child{width: 100px;height: 100px;background: red;float: left;}</style>
</head>
<body><div id="parent"><div id="child"></div></div>
</body>
</html>

效果图-----未清除浮动

效果图-----已清除浮动

当为子元素设置了浮动，如果不清除浮动，那么父元素将会出现高度塌陷的现象。所以当我们设置了浮动后，就要解决浮动带来的影响。下面就要我们介绍几种清除浮动的方法！

方法一：额外标签法

给谁清除浮动，就在其后额外添加一个空白标签，给其设置clear：both。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化比较差。

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来。

css样式

#clear{clear: both;
}

html代码

<div id="parent"><div id="child"></div><!-- 方法一  额外标签法 --><div id="clear"></div>
</div>

方法二：父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

css样式

#parent{overflow: hidden;
}

方法三：使用after伪元素清除浮动

优点：符合闭合浮动思想，结构语义化正确。

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

css样式

#parent:after{content: "";display: block;height: 0;clear:both;visibility: hidden;
}
#parent{/* 触发 hasLayout */ *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

方法四：使用before和after双伪元素清除浮动

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

css样式

#parent:after,#parent:before{content: "";
display: table;
}
#parent:after{clear: both;
}
#parent{*zoom: 1;
}

方法五：为父元素设置高度

缺点: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。

优点: 简单粗暴直接有效，清除了浮动带来的影响。

清除浮动的五种方法详解相关推荐

H5清除浮动的五种方法
引言:在HTML中,如果所有子元素发生了浮动,而父元素又未设置高度,则会发生高度坍塌为0,从而影响布局,因此要清除浮动,现跟大家分享五种方法: 方法一:给父元素添加高度 ,但企业开发中 ...
清除浮动的五种方法及优缺点
我们首先要思考:为什么要清除浮动? 源代码: <!DOCTYPE html> <html> <head><meta charset="utf-8&q ...
CSS清除浮动的五种方法(超详细)
1.为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在桌面上.我们一般布局的时候都是只设置宽度不设置高度,让内容来自动填充高度.但使用浮动后会让原本填充的高度消失,父元素高度为0,后续添加内容 ...
java构造和解析json_Java构造和解析Json数据的两种方法详解一
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Jso ...
java json解析代码_Java构造和解析Json数据的两种方法详解一
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Jso ...
Java构造和解析Json数据的两种方法详解一
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Jso ...
java构建json_Java构造和解析Json数据的两种方法详解一
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Jso ...
查看登陆系统用户的信息的三种方法详解
查看登陆系统用户的信息的三种方法详解作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.who这个命令显示可以谁在登陆,但是这个有很多的花式玩法,这个命令超简单语法:who [O ...
站长在线Python精讲：在Python中格式化字符串的两种方法详解
欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是<在Python中格式化字符串的两种方法详解>.本知识点主要内容有:使用%操作符格式化字符串和使用format()方法格式化字 ...

清除浮动的五种方法详解

清除浮动的五种方法详解相关推荐

最新文章

热门文章