前言：
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。 css浮动
但是使用了float后不清除浮动就会出现父级高度塌陷问题
造成的后果就是父元素高度为0，浮动元素的内容撑不开父元素，这种时候就需要清除浮动
.container{ border: 5px solid#eee; } .media { width: 100px; height: 100px; float: left; background-color:aquamarine; } .container p{ float: left; }
hello
下面介绍清除浮动的方法
方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素如
，
并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用
或
来进行清理。
clear 属性指定元素两侧不能出现浮动元素
效果图：（可以看到父元素被撑开，说明清除浮动生效）
优点：简单，代码少，浏览器兼容性好。
缺点：不太适合语义化，代码不够优雅，后期不容易维护。
方法二：使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动
这是我常用的一种方法，在另一篇 文章 也是使用 overflow属性 清除浮动
.container{ border: 5px solid#eee; overflow: auto; /* 或者 overflow: hidden; */ } .media { width: 100px; height: 100px; float: left; background-color:aquamarine; } .container p{ float: left; }
hello
使用以上代码也可以达到清除浮动的效果
方法三：使用CSS的::after伪元素
.container{ border: 5px solid#eee; } .container::after{ content: "020"; display: block; height: 0; clear: both; /* 表示元素不可见 */ visibility: hidden; } .media { width: 100px; height: 100px; float: left; background-color:aquamarine; } .container p{ float: left; }
hello
通过CSS伪元素在容器的内部元素最后添加了一个看不见的”020″ ( visibility: hidden; )，
并且赋予clear属性来清除浮动。
总结
通过上面的例子，我们可以发现清除浮动的方法可以分成两类：
一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 ::after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，就像 加上 overflow:hidden; 。
本人是初入前端的小菜鸟，文章如有错误，恳请大家提出问题，本人不胜感激
文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力 长路漫漫，道阻且长
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218907.html原文链接：https://javaforall.net
