今天小编跟大家讲解下有关常用的清除浮动的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关常用的清除浮动的方法 的相关资料，希望小伙伴们看了有所帮助。
本文所讨论场景均由以下代码表示。
HTML结构：
<div class="outer"> <div class="inner"></div></div>CSS样式：
.outer{ width:300px; border: 1px solid #ccc; background:red;}.inner{ width:100px; height:100px; background: blue; float:left;}以上代码显示结果为
期待的显示结果为
分析：由上图看出 父元素为被撑开 高度为0 所以看不到其背景色。
（我理解的浮动：游泳池底有一个大小height可伸缩的.outer 里面放着一个.inner 有一天你对.inner设置了浮动 它就飘到游泳池的水面了（当然 它仍在.outer占据位置 这里仅仅用来理解父元素缩小的原因 不适用于浮动其他特性的理解） 于是.outer就瘪下去了 因为没人撑开它了）
下面进入正题 讨论以下常见的四种清除浮动的方法 下列均能得到期待的显示结果。
（1）添加块级新元素 并设置为clear：both
HTML结构：
<div class="outer"> <div class="inner"></div> <div class="new"></div></div>CSS样式：
.new{ clear:both;}原理分析：clear：both属性会防止指定了clear的元素两边存在浮动元素。由于.new左右均不能有浮动元素 所以它必须在.inner下面找到一个位置 所以.outer就被撑开了。注意：新添加的.new一定要为块级元素 不然.new就不会换行在.inner下面找位置 而是在inner右边找位置了。
优点：易理解 不容易受其他属性设置影响
缺点：增加了dom节点数
（2）父元素定义 overflow: auto
CSS样式：
.outer{ width:300px; border: 1px solid #ccc; background:red; overflow:auto;}原理分析：应用了overflow：auto的元素 将会扩展它的大小以包围它所包含的元素 而浮动元素仍在父元素中占据位置 因此 .outer会扩展其大小以包含.inner。
优点：代码量少
缺点：易受影响。比如若父元素设置了高度 当子元素高度超过父元素时 会出现滚动条。
（3）对父元素添加伪类：after
.outer:after{ content:""; display: block; clear:both;}原理分析：这种方法原理与第一种方法原理类似 都是通过添加一个元素来撑开父元素（content:""; 相当于一个空内联元素 display: block;将此空元素设为以块级元素显示 clear:both; 防止其左右有浮动元素）。不同的是 伪类不占据dom元素节点 这也是这种方法相比方法一的优点。
优点：不占据dom节点 适用性广
缺点：代码量多 据说对seo不友好（待求证）
（4）对父元素也设置float
.outer{ width:300px; border: 1px solid #ccc; background:red; float:left;}原理分析：float属性有一个特性 浮动元素会延伸 从而包含其所有后代浮动元素（css权威指南P299） 因此.outer会延伸其高度 以包含.inner。
优点：简单易行
缺点：适用性不强 对父元素设置float可能会影响整体布局。
总结：综合来看 第三种通过伪类来清除浮动的方法比较好。不过 实际使用时 还是要根据实际场景 综合考虑选择适用的清除浮动方法。
以上就是本文的全部内容 希望本文的内容对大家的学习或者工作能带来一定的帮助 同时也希望多多支持爱蒂网！
来源：爱蒂网
