5684人阅读
前言：
在非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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
效果图-----未清除浮动
效果图-----已清除浮动
当为子元素设置了浮动，如果不清除浮动，那么父元素将会出现高度塌陷的现象。所以当我们设置了浮动后，就要解决浮动带来的影响。下面就要我们介绍几种清除浮动的方法！
方法一：额外标签法
给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化比较差。
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来 。
css样式
#clear{ clear: both; }
- 1
- 2
- 3
html代码
<div id="parent"> <div id="child"></div> <!-- 方法一 额外标签法 --> <div id="clear"></div> </div>
- 1
- 2
- 3
- 4
- 5
方法二：父元素添加overflow:hidden
通过触发BFC方式，实现清除浮动
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。
css样式
#parent{ overflow: hidden; }
- 1
- 2
- 3
方法三：使用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执行，其他浏览器不执行*/ }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
方法四：使用before和after双伪元素清除浮动
优点：代码更简洁
缺点：用zoom:1触发hasLayout.
css样式
#parent:after,#parent:before{ content: ""; display: table; } #parent:after{ clear: both; } #parent{ *zoom: 1; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
方法五：为父元素设置高度
缺点: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。
优点: 简单粗暴直接有效，清除了浮动带来的影响。
css前端清除浮动
来自专栏
前端开发
忆弥 9篇文章 0人订阅
发布于2020-11-07著作权归作者所有
相关推荐更多
常见的清除浮动的五种解决办法
孙叫兽 1277 阅读 17 评论
详解清除浮动的多种方法
做人要厚道2013 2449 阅读 0 评论
CSS清除浮动float的三种方法小结
weixin_38669093 0 下载
清除浮动的常用的几种方法
团酱 165 阅读 0 评论
清除浮动的四种方式及其原理
FL_csdn1 5213 阅读 6 评论
最新发布 清除浮动的方法
Matcha_ice_cream 879 阅读 0 评论
清除浮动的5种方法_b2cl的博客_清除浮动方式
父盒子失去高度,只能看到子盒子,这就是浮动对父盒子的影响.那么如何清除这个影响呢?有5种方法: 第一种方法: 直接给父盒子加高度(不推荐) 为什么不推荐呢?因为在开发中,很多时候,我们外面的盒子是无法确认高度的,需要有内容将高度撑起...
清除浮动最常见的五种方式_hmxs_hmbb的博客
清除浮动的方法哪五种? (1) 额外标签法 (2) 父元素添加overflow (3) 父元素添加单伪元素(after) (4) 父元素添加双伪元素(after和before) (5) 给父元素添加高度 (1)额外标签法
清除浮动的五种方法_芋圆不想 圆的博客_清除浮动的几种...
通过触发BFC的方式清除浮动,必须定义width或者zoom:1,不能同时定义height,使用这个方法的时候,浏览器会自动检查浮动区域的高度。不能和position配合使用,因为超出尺寸的可能会被隐藏,就没法显示溢出元素。
CSS清除浮动的五种常用方法_心。晴的博客_清除浮动的方法
CSS清除浮动的五种常用方法 清除浮动是每一个 web前台设计师必须掌握的技能。浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width、height 属性。以下面的场景为例,给大家展示一下不清除浮动引发的“车祸...
清除浮动的五种方式_shang__前端的博客
清除浮动的五种方式 前前前前端的静静之第九篇博客 换个心情,学个css吧(其实是再看面试题,不熟悉而已,安慰自己真是一把好手) 浮动,会脱离标准文档流,所以为了解决这一弊端,需要在设置过浮动之后清除一下浮动带来的影响...
清除页面浮动
FG. 125 阅读 1 评论
解释下浮动和它的工作原理？清除浮动的技巧
weixin_30799995 79 阅读 0 评论
清除浮动的4种方式
star@星空 2万+ 阅读 2 评论
热门推荐 清除浮动的最常用的四种方法，以及优缺点
h_qingyi 25万+ 阅读 37 评论
1504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
