html怎么使用伪类清除浮动,css中after伪类清除浮动的主流方法详解！

心已赠人 2022-10-07 04:43 161阅读 0赞

本篇文章主要给大家介绍如何用css after伪类清除浮动的方法。

首先大家要了解什么是css浮动？

使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

也可以这样理解：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

那么我们为什么要清除浮动呢？

这是因为浮动元素有时会影响整体的布局，产生一些bug。

如下代码：

css浮动示例

.demo\{

background: \#ffffff;

border: 1px solid black;

margin: 50px auto;

padding: 50px;

\}

.demo1\{

float: left;

width: 100px;

height: 50px;

color: white;

background: \#1094f2;

border: 1px solid black;

\}

.demo2\{

float: left;

width: 100px;

height: 50px;

color: white;

background: \#9492ff;

border: 1px solid black;

\}

demo1

demo2

效果如下图：

![7d18f1e3f6618a85580b82b8d5ba95c2.png][]

图中可以看到我们在给demo1.2设置浮动属性float:left后，没有将父div撑开的情况。而且我们并没有给demo设置宽高尺寸。

这里大家就先要了解css中浮动属性是什么？

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

那么当我们遇到一些影响布局的浮动怎么清除呢？

下面就给大家介绍最主流的清除方法，使用cssafter伪类。

添加以下代码即可：.demo:after\{

clear: both;

content: '';

display: block;

\}

最终效果如下：

![b57018c350b64b5353368f3fe0bf33e9.png][]

其实主要原理就是：

利用:after和:before在元素内插入两个元素块，从而达到清除浮动的效果。

本篇文章就是关于用after伪类清除浮动的具体方法介绍，非常简单易懂，希望对需要的朋友有所帮助！】

想要了解更多前端相关知识，可以关注PHP中文网CSS视频教程、Bootstrap教程等等相关教程，欢迎大家参考学习！

[7d18f1e3f6618a85580b82b8d5ba95c2.png]: /images/20221005/b46e80bf92e74846871c15825d5628d5.png
[b57018c350b64b5353368f3fe0bf33e9.png]: /images/20221005/8c35cbfddcf7498c9024b8797feb8d6f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS浮动——浮动的特性、清除浮动

CSS浮动一个页面基本包含了三种布局方式：标准流、浮动和定位浮动（float）浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示

一时失言乱红尘/ 2022年11月22日 12:52/ 0 赞/ 243 阅读

相关 CSS 清除浮动

今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![在这里插入图片描述][watermark_type_Zm

男娘i/ 2022年11月22日 05:28/ 0 赞/ 210 阅读

相关 html怎么使用伪类清除浮动,css中after伪类清除浮动的主流方法详解！

本篇文章主要给大家介绍如何用css after伪类清除浮动的方法。首先大家要了解什么是css浮动？使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素

心已赠人/ 2022年10月07日 04:43/ 0 赞/ 162 阅读

相关 CSS清除浮动方法

什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的

痛定思痛。/ 2022年06月16日 07:19/ 0 赞/ 246 阅读

相关 HTML伪元素、用伪元素清除浮动流

1. 伪元素：可以当做html标签用css样式来操作，但是没有html结构（1）任何一个元素都有伪元素，可以当做正常元素来使用。（2）::before ：在标签的逻辑之

àì夳堔傛蜴生んèń/ 2022年05月13日 09:04/ 0 赞/ 217 阅读

相关 css-清除浮动

1.定义：在非IE浏览器中，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以

逃离我推掉我的手/ 2022年04月22日 13:16/ 0 赞/ 251 阅读

相关伪类清除浮动

之前写的项目有个base.css，后来找不到了，记录一下 /清除浮动代码/ .clearfloat:after { display: block

古城微笑少年丶/ 2022年01月26日 15:39/ 0 赞/ 212 阅读

相关 CSS 清除浮动伪类

参考链接：https://www.cnblogs.com/yingsu/p/7261904.html 不清楚浮动的结果和影响不再描述，清除浮动的代码别处也有很多，每种方法都有

痛定思痛。/ 2022年01月09日 05:27/ 0 赞/ 168 阅读

相关 CSS 清除浮动伪类

参考链接：https://www.cnblogs.com/yingsu/p/7261904.html 不清楚浮动的结果和影响不再描述，清除浮动的代码别处也有很多，每种方法都有

冷不防/ 2021年12月23日 10:47/ 0 赞/ 191 阅读

相关 CSS清除浮动

.clearfix::before, .clearfix::after \{ content : ""; display : table; cl

矫情吗；*/ 2021年09月08日 15:32/ 0 赞/ 418 阅读