clear清浮动及after伪元素清浮动

最新推荐文章于 2022-04-26 16:40:35 发布
最新推荐文章于 2022-04-26 16:40:35 发布
阅读量214 收藏
点赞数
分类专栏： 前端面试题 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42917020/article/details/121881374
版权

clear:both的真正含义：

清除当前元素前面兄弟级浮动元素对当前元素的影响

最好的方法就是给当前元素添加一个伪类：：after，然后给他的样式添加上clear:both

王源偷我华子抽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
父元素的高度为0利用伪元素:after清除浮动可解决问题
09-25
通过将`:after`伪元素的`content`属性设置为空字符串（`content:""`），然后将其`display`属性设置为`block`，使其成为块级元素，最后设置`clear:both`，我们可以达到与添加额外`<div>`相同的效果，即清除浮动并恢复...
.clear 万能清除浮动(clearfix:after)
09-25
`:after` 伪元素被添加到具有 `.clearfix` 类的元素后面，它的 `content` 属性设置了一个不可见的字符，`display: block` 让这个内容作为块级元素存在，而 `clear: both` 则确保了其后的元素不会与浮动元素重叠。...
:after，清除浮动，要给父元素添加
zxp_smile的博客
12-09 282
.content:after { content: ''; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; }
div CSS 清除float常用方法(:after和clear:both)
王鹤霖的专栏 三人行必有我师
02-02 920
 很多前端都是用.clearfix:after{ .....}  和 .clearit{....}的组合 来清除浮动， 下面我来讲解下这俩种的用法： 首先大家切页面经常用到浮动 float:left; float:right; 有浮动就需要清除他们， after伪类由于受到ie6 7的不支持所以大多数时候，一般都需要定义一个固定的class名设置属性clear的值both的div 两
清除浮动的三种方法（::after/.clear/overflow)
screaming_color的博客
03-23 6406
清除浮动的三种方法 ::after clear:both; overflow
更简洁的 CSS 清理浮动方式（使用 :after 伪类来提供浮动块后的 clear:both）
yaolei258的专栏
04-17 1610
前几天发现了一段css .clear:after {      content: ".";      display: block;      height: 0;      clear: both;      visibility: hidden; } .clear{     zoom:1; } 大概了解到这是用来清楚浮动的，但是对于after,content，
CSS-8.3-浮动与清除
QWH_PYTHON的博客
09-24 274
CSS-8.3-浮动与清除一：float：浮动二：clear：清除三：子盒子浮动造成父盒子高度塌陷2、为父元素添加overflow:hidden属性3、为父元素添加伪类：after,对伪类设置clear:both 文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置 ...
前端三剑客之CSS---浮动的难点解析三（使用clear清除浮动和伪元素after清除浮动以及终极解决浮动的.clearfix类)
Calarqiang的博客
08-30 647
清除浮动的两种基本通用方式 1. 使用clear清除浮动 作用：可以清除某个浮动元素对下面布局的影响！ 可选值： left 清除设置了float:left的元素对自己的影响。 right 清除设置了float:right的元素对自己的影响。 both 清除两侧浮动中对自己影响最大的那一侧浮动。 疑问？何为最大影响？ clear本质： 它的本质是给某个元素设置一个正的margin-top值。当一个元素上面有一个浮动元素时，浏览器会自动计算出该浮动元素的盒子占地大小（可见框+margin）,然后给
CSS 清除网页浮动 经验
09-27
创建一个名为`clearfix`的CSS类，利用伪元素`:after`来实现清理浮动。这种方法不会增加额外的HTML元素，而是通过CSS来解决问题。例如： ```css .clearfix:after { content: " "; clear: both; height: 0; ...
CSS教程 伪清除浮动
09-25
另外，可以使用CSS3的伪元素`::after`，添加`content:""`和`clear:both`，创建一个看不见的元素来清除浮动，这种方式被称为clearfix hack。 总结来说，浮动和清除浮动是CSS布局中的基础，但处理不当可能会引发问题...
::before ::after 以及 clear:left, right, both
飞驰的地铁
06-13 1201
对于::before, ::after, 发现以前理解错了，在这里记录一下。 起因 早上看 float 布局时， 突然想起以前学的 clear:both 清除浮动， 其中有个利用 ::after 伪元素的方法， 我动手试了一下, 一开始 ，我写成这样，如图： <div class="parent"> <div class="left"></div> ...
使用clear,after完美解决高度塌陷
qq_45797783的博客
07-31 588
clear：清除浮动对下一个元素的布局影响 上面开启BFC的第一种方法可能会对下一个元素的布局产生影响，针对这种影响， 我们可以设置下一个元素的clear属性，可选值： left: 清除向左浮动元素对它的影响 right：清除向右浮动元素对它的影响 both：清楚两个中最大影响 ::after伪元素，配合content,在一个元素后面加入一个行内伪元素 .out{ background-color: #bfa; border: 10px red
html中clearfix:after也clear:both有什么区别?
山鹰的专栏
09-16 2499
①:after是选择器，伪元素之一，用于在指定元素如clearfix后面添加内容，用content:"这里是内容";②clear:clear;是属性值，用于清除附近浮动元素的影响。
清除float常用方法(:after和clear:both)
weixin_34117522的博客
12-20 116
参考网址：http://jingyan.baidu.com/article/c74d60006bea410f6a595d17.html .clearfix:after{ .....} 和 .clearit{....}的组合 来清除浮动 转载于:https://www.cnblogs.com/xlwum/p/6203643.html...
解决高度塌陷问题——Clear属性、after伪类
weixin_46149357的博客
07-24 588
clear属性 如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响 clear的作用： 清除浮动元素对当前元素所产生的影响 可选值： 1）left 清除左侧元素对当前元素的影响 2） right 清除右侧浮动元素对当前元素的影响 3） both 清除两侧中最大影响的那一侧 原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其位置不受到其他元素的影响。 设置浮动，此时box2被box1盖住 &lt.
css中clear:both属性的理解及用法
热门推荐
Sfh的博客
06-27 1万+
css中clear:both属性的作用是清除浮动，设置了浮动就会破坏文档流结构，影响后边的布局，此时在设置清除浮动便可解决这一问题，可以认为，设置了clear:both的当前元素会把前边元素中设有浮动属性的元素，当做没设浮动一样来看待，以此来消除其对自己的影响 对比设置和不设置clear:both的结果来说明 <style> .test-title{ background-color: orange; } .test-con
解决CSS中float:left后需要clear:both清空的繁琐步骤
weixin_34418883的博客
08-06 182
　　之前，因为公司专门有CSS+DIV的切片设计师，所以我一直都是注重程序的设计与开发。现在，因为接了一些Web网站的项目需要制作，就在空闲时间学习起了CSS、Jquery。 　　 　　现在，大部分的横排导航都是通过 ul -&gt; li *n -&gt; a 来实现的。具我所知，要达到这种效果，有几种方法可以实现。 　　1.传统处理方式： li {float:left;}/*这样，...
面试题23：使用 clear 属性清除浮动的原理？
qq_51066068的博客
04-26 1198
面试官：请说一下使用 clear 属性清除浮动的原理？ 使用clear属性清除浮动，其语法如下： clear:none|left|right|both 如果单看字面意思，clear:left 是“清除左浮动”，clear:right 是“清除右浮动”，实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。 官方对clear属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。 还需要注意 clear 属性指的是元素盒.
clear 清空浮动的高级写法 :after 添加一个不可见层
ISaiSai的专栏
02-28 4771
.clear:after {   display: block;   content: '';   clear: both;   visibility: hidden; }
清除浮动方法？ 解释 clear、overflow、after伪元素
最新发布
04-24
常见的解决办法有：使用clear属性、给包含子元素的父元素添加overflow属性，以及使用after伪元素。 clear属性可以取值为left、right、both或none，它可以让元素的上下文环境从前面的浮动元素中恢复过来。设置为left...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王源偷我华子抽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值