前言：

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;}</style></head><body><div class="container"><div class="media"></div><p>hello</p></div>

下面介绍清除浮动的方法

方法一：使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，

并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

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;}</style></head><body><div class="container"><div class="media"></div><p>hello</p></div>

使用以上代码也可以达到清除浮动的效果

方法三：使用CSS的::after伪元素

结合 ::after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个::after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.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;}</style></head><body><div class="container"><div class="media"></div><p>hello</p></div>

通过CSS伪元素在容器的内部元素最后添加了一个看不见的"020" ( visibility: hidden; )，

并且赋予clear属性来清除浮动。

总结

通过上面的例子，我们可以发现清除浮动的方法可以分成两类：

一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 ::after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，就像加上 overflow:hidden; 。

本人是初入前端的小菜鸟，文章如有错误，恳请大家提出问题，本人不胜感激

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力长路漫漫，道阻且长

转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/125052695?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125052695%22%2C%22source%22%3A%22qq_52855464%22%7D&ctrtid=OybFt

css清除浮动的几种方式相关推荐

css 清除浮动的几种方式
css 清除浮动的几种方式浮动布局和定位布局为css中布局的常用的两种布局方式,而且兼容性会比较好.随着flex的流行,以后会是主流. float布局会脱离文档流,对页面的布局造成影响,比如造成父级 ...
前端css 清除浮动的几种方式
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样.浮动的块框会漂浮在文档普通流的块框上. 清 ...
CSS—清除浮动的几种方式
什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版.浮动只有左右浮动.2--浮动元素A的位置与上一个元素有关系.如果上一个元素有浮动,则A的顶部与上一个元素顶部对 ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
清除浮动的几种方式，以及各自的优缺点
清除浮动的几种方式,以及各自的优缺点 1.使用空标签清除浮动clear:both. 2.给父级div定义overflow:hidden 3.父级div定义伪类:after和zoom(用于非IE浏览器) ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...
清除浮动的四种方式及其原理
前言: 什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它.下面会介绍到为什么要清除浮动以及清除浮动的四种方式. 目录: 前言: 一.为什么要清除浮动二.清除浮动的第一种方式---给父 ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
div清除浮动的四种方式
div 清除浮动的四种方式清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题. 简单来说给父元素加一个高度也能解决这个问题,但是很多情况下不方便给父元素高度.所以,一般情况下,应该让子元 ...

css清除浮动的几种方式

前言：

方法一：使用带clear属性的空元素

方法二：使用CSS的overflow属性

方法三：使用CSS的::after伪元素

总结

css清除浮动的几种方式相关推荐

最新文章

热门文章