html中clearfix:after也clear:both有什么区别?

最新推荐文章于 2025-06-02 17:01:47 发布
最新推荐文章于 2025-06-02 17:01:47 发布
阅读量2.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LanSeTianKong12/article/details/48484659
本文介绍了CSS中两种重要的样式控制方法：使用after伪元素在元素后添加内容，以及利用clear属性清除浮动元素的影响。after伪元素可用于实现clearfix等布局技巧，而clear属性则有助于解决由浮动元素引起的布局问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

①:after是选择器，伪元素之一，用于在指定元素如clearfix后面添加内容，用content:"这里是内容";②clear:clear;是属性值，用于清除附近浮动元素的影响。
用clearfix:after消除float:left的css浮动效果
weixin_30326515的博客
11-26 176
用clearfix:after消除 css浮动 在写HTML代码的时候，创造在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子： <div style="border:2px solid red;"> <div style="fl...
div CSS 清除float常用方法(:after和clear:both)
王鹤霖的专栏 三人行必有我师
02-02 986
 很多前端都是用.clearfix:after{ .....}  和 .clearit{....}的组合 来清除浮动， 下面我来讲解下这俩种的用法： 首先大家切页面经常用到浮动 float:left; float:right; 有浮动就需要清除他们， after伪类由于受到ie6 7的不支持所以大多数时候，一般都需要定义一个固定的class名设置属性clear的值both的div 两
CSS——清除浮动
最新发布
？的博客
06-02 424
该盒子必须出现在所有左浮动盒子的下方。如果前方有左浮动盒子，浏览器会将该盒子下推到所有左浮动盒子的最底部。进而强制父盒子重新计算高度，直到高度能包裹所有左浮动盒。浮动是让元素脱离文档流直接悬浮在页面上，父元素会随着元素的变化而改变，而当元素出现浮动时原本支撑着父元素的高度消失，造成高度塌陷。如果前方有右浮动盒子，浏览器会将该盒子下推到所有右浮动盒子的最底部。如果前方有浮动盒子，浏览器会将该盒子下推到浮动盒子的最底部。该盒子必须出现在所有左浮动和右浮动盒子的下方。该盒子必须出现在所有右浮动盒子的下方。
清除float常用方法(:after和clear:both)
weixin_34117522的博客
12-20 151
参考网址：http://jingyan.baidu.com/article/c74d60006bea410f6a595d17.html .clearfix:after{ .....} 和 .clearit{....}的组合 来清除浮动 转载于:https://www.cnblogs.com/xlwum/p/6203643.html...
html中清除浮动after,使用:after伪元素清除浮动
weixin_39853968的博客
06-11 270
1.clear属性只适用于块级元素2.after伪元素加在mainBox容器上，mainBox容器本省并没没有浮动,对其子元素是不会有影响现在代码看到的效果是mainBox有宽度，没有高度，是因为按正常的块级元素的在高度为height不显式设置(height:auto)的情况下，高度为其下所有最高块级元素的上外边界(最高行内框的上边界)和最低元素下外边界(最低行内框的下外边界)的距离或；但是设置了...
css清除浮动clearfix:after的用法详解（附完整代码）
热门推荐
MiuWing的博客
07-02 1万+
如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开 网上常用的完整代码： CSS Code复制内容到剪贴板 .clearfix:before, .clearfix:after {        content:"";        display:table;
.clearfix:after(清除浮动)中各个属性及值详细解说
12-08
3. `clear: both`: 这个属性指示元素不应与浮动元素相邻，因此清除其左右两侧的浮动，使得父元素能够包围所有的子元素，即使这些子元素有浮动。 4. `visibility: hidden`: 这将元素设为不可见，但它仍保留空间。...
.clear 万能清除浮动(clearfix:after)
09-25
在网页布局设计中，浮动（Float）是一种...`.clear` 需要在HTML中插入额外的元素，而 `clearfix:after` 则通过CSS伪元素实现，更符合语义化和维护性。在实际项目中，根据需求和浏览器兼容性选择合适的方法至关重要。
clearfix:after清除浮动的用法及测试代码
01-19
今天回顾一下css中的清除浮动 ...}/*不知道有什么用处，不加ie7也没有问题*/ .clearfix:after {visibility: hidden;display: block;font-size: 0;content: ” “;clear: both;height: 0;} .clearfix{*zoom:1
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }zoom1报错
10-25
它通过在`.clearfix`类的选择器前添加`:before`和`:after`伪元素，并设置它们的内容为空字符串且display属性为`table`，以及`:after`伪元素设置`clear:both`来创建一个看不见的“表格”结构。`*zoom:1`则是针对IE6和...
::before ::after 以及 clear:left, right, both
飞驰的地铁
06-13 1272
对于::before, ::after, 发现以前理解错了，在这里记录一下。 起因 早上看 float 布局时， 突然想起以前学的 clear:both 清除浮动， 其中有个利用 ::after 伪元素的方法， 我动手试了一下, 一开始 ，我写成这样，如图： <div class="parent"> <div class="left"></div> ...
clearfix--清楚浮动（来源：HTML5与CSS3基础教程）
my_secret_name的专栏
02-17 1252
清楚浮动
更简洁的 CSS 清理浮动方式（使用 :after 伪类来提供浮动块后的 clear:both）
yaolei258的专栏
04-17 1722
前几天发现了一段css .clear:after {      content: ".";      display: block;      height: 0;      clear: both;      visibility: hidden; } .clear{     zoom:1; } 大概了解到这是用来清楚浮动的，但是对于after,content，
html中清除浮动after,clearfix:after清除浮动的用法及测试代码
weixin_42515380的博客
06-11 353
今天回顾一下css中的清除浮动复制代码代码如下:.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} /*所有主流浏览器都支持 :after 伪元素。*/.clearfix{*+height:1%;}/*不知道有什么用处，不加ie7也没有问题*/.clearfix:after {visibi...
浅谈clearfix类和clear清除浮动
TyrionJ的博客
12-23 6823
CSS浮动会对原本的布局产生破坏，所以我们会考虑清除浮动产生的影响，本文不谈浮动以及各种清除浮动的方法，只讨论clearfix类和clear清除浮动。 在网页设计中，很常见的一种情况是给内容一个div作为包裹容器，而这个包裹容器不设置高度，而是让里面的内容撑开包裹容器的高度。<div　class="wrapper" > <div class="content"> </div> </
CSS之after clear
liujan511536的专栏
12-09 2712
clear属性只会影响使用它的元素，具体可以看我的这篇文章： http://blog.youkuaiyun.com/liujan511536/article/details/50086275 当我们给一个元素加上:after时，就是在这个元素内容的后面加上新的内容， 如： #demo:after { content:"--good" } hello world
clear清浮动及after伪元素清浮动
王源偷我华子
12-11 285
clear:both的真正含义： 清除当前元素前面兄弟级浮动元素对当前元素的影响 最好的方法就是给当前元素添加一个伪类：：after，然后给他的样式添加上clear:both
[转载]-CSS清除浮动:clearfix:after
jgsecurity的博客
10-25 206
.clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0 } .clearfix { *zoom: 1 } 解释： 在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。 这个clearf.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值