css清除浮动的几种方法_清除浮动造成的影响方法四

最新推荐文章于 2022-11-23 20:02:54 发布
最新推荐文章于 2022-11-23 20:02:54 发布
阅读量52 收藏
点赞数
文章标签： css清除浮动的几种方法

方法四:使用伪元素隔离法(内墙元素隔离法的升级版)

内墙法效果十分不错,但是对于广大程序猿们来说,能少动手的坚决不多动一下,然而在使用内墙法的时候,我们还要特地去写一个元素来清除浮动,这样对于我们这些高贵的程序猿来说,那是不可能的。

于是CSS中有伪元素这个概念,我们可以借助before和after这两个伪元素来实现内墙法的升级版本。

<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{ width:300px; height:300px; float: left; background-color: blue; }
#content{ background-color: gray; }
</style>

我们这时候给#wrap元素和#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示

<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>
<div id=”wrap”>
<div id=”inner”></div>
</div>
<div id=”content”>123</div>
<style>
#wrap{ background-color: red; }
#inner{width:300px; height:300px; float: left; background-color: blue; }
#wrap::after{ content:””; display:block; clear:both; }
#content{ background-color: gray; }
</style>

说明:

  1. 利用该方法能完美的解决浮动的负作用
  2. 对于部分垃圾浏览器不兼容伪元素的情况(你懂得是哪些),那就把伪元素的两个冒号改成一个冒号即可
weixin_39921087
关注
css清除浮动无效,css清除浮动的处理方法
weixin_36300623的博客
08-03 1502
根据《精彩绝伦的css》JS Bin.news{outline:1px solid pink}.col{float: left;width:33%;outline:1px solid blue;}some text-oneConHugeCo has permanently altered the theory of niches. What do we morph? Anything and ev...
css清除浮动无效,CSS清除浮动方法总结
weixin_36002897的博客
08-03 1356
清除浮动的原因假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。举例如下：复制代码代码如下:#a {width: 100px;border: 1px solid #ccc;}#b {height: 50px;float: l...
CSS清除浮动
SpringCloudTest的博客
08-08 116
1.为什么要清除浮动 假设有一个场景，一个父盒子里面有三个子盒子，但是这三个子盒子使用了float来排列。也就是说三个盒子都是浮动的，所以盒子不占有高度。父盒子没有设置高度，目的就是想要让子盒子自己填充，如果子盒子都是使用的浮动，那么就不占有高度。那么这个父盒子及子盒子的区域就会被其他的非浮动盒子填充。 以上就是浮动所带来的影响。 2.清除浮动的方式 2.1 额外标签法(隔离法) 具体实现： 在浮动元素的末尾添加一个空的标签 例如：<div style="clear:both"></di
html中清除右侧浮动的运用,前端浮动布局中清除浮动的方式：Clear 属性和伪元素 | IT工程师的生活足迹...
weixin_36316574的博客
06-02 338
上面已经讲过了需要对浮动布局方式设置清除浮动；下面介绍几种清除浮动的方式。一、隔离法 Clear也称为额外标签法。就是在最后一个浮动的子元素后面添加一个额外标签；在这个标签上添加清除浮动样式。clear : both1.1、Clear 属性设置哪个方位没有浮动元素此属性指定元素是否可以位于其之前的浮动元素旁边，或者必须在其下方向下移动(清除)。1.2、注意点1、该属性可以应用于浮动元素和非浮动元素...
详解清除浮动的多种方法
完善飞跃
03-06 3091
有段时间不写文章了, 以后正确不间断. 清除浮动, 这一篇文章足矣. #浮动让我们既爱又恨爱, 有了浮动我们可以更加方便的布局.恨, 有了浮动他也带来了一些副作用, 特别是在IE67上(现在几乎已经销声匿迹了).为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动.清除浮动的方式有很多, 只要我们把浮动的原理搞明白了, 清除浮动也是非常好理解的.正所谓万变不离其宗有如下
CSS清除浮动的三种方法【前端开发】
跳探戈的小龙虾的博客
02-02 1672
p.s.高产量博主，点个关注????不迷路！ 目录 I.浮动的介绍及浮动需要清除的原因 II.清除浮动方法一：额外标签法(隔墙法) III.清除浮动方法二：父级元素添加 overflow 属性法 IV.清除浮动方法三：父级元素添加 after 伪元素法 V.清除浮动方法四：父级添加双伪元素法 I.浮动的介绍及浮动需要清除的原因 首先简单介绍一下浮动： 浮动官方给的定义是用于创建浮动框，使其移动到一边，直到左边缘或右边缘接触及包含块或另一个浮动框的边缘。代码格式为 float:相关属性
html清除浮动有几种方法,几种css 清除浮动的方法
weixin_35918994的博客
06-19 144
1、采用伪类:after进行后续空制的高度位零的伪类层清除2、采用css overflow:auto的方式撑高3、采用css overflow:hidden的方式产生怪异适应4、采用display:table将对象变成table形式5、采用div标签，以及css的clear属性6、采用br标签，以及css的clear属性7、采用br标签，以及其自身html的clear属性粗略的看，他们都能将问题解...
举例HTML中几种清除浮动的方法,css清除浮动举例详说
weixin_28923083的博客
06-26 208
css设计浮动属性的主要目的，是为了实现文本绕排图片的效果。一.浮动当浮动一张图片或者其他元素时，浏览器会将浮动元素往上方推，直到它碰到父元素的内边界。后面的元素不再认为浮动元素在文档流中位于它的前面了，因为它就会占据父元素左上角的位置。值得说明的是：css在呈现元素的时候都要将元素生成矩形盒子，这个矩形盒子实际上分为内容和边框组成的上 半部分，以及背景颜色和背景图片组成的下半部分，浮动只是浮动起...
css清除浮动的四种方法(详细)
weixin_45842954的博客
06-01 1万+
css清除浮动的四种方式
CSS清除浮动的五种方法(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-23 1万+
浮动的原理是让图片脱离文档流，直接浮在桌面上。我们一般布局的时候都是只设置宽度不设置高度，让内容来自动填充高度。但使用浮动后会让原本填充的高度消失，父元素高度为0，后续添加内容布局会产生混乱,造成高度塌陷,这时候就可以利用清除浮动来解决父元素高度塌陷的问题。解决方法一(clear),解决方法二(overflow:hidden),解决方法三(给父元素添加高度),解决方法四(额外标签法),解决方法五(使用after伪元素清除浮动)
css清除浮动的几种方法以及对应规范说明
09-25
CSS清除浮动是为了处理浮动元素对周围元素布局的影响，特别是防止父元素因浮动元素而高度塌陷。以下是对清除浮动的几种方法及其规范说明的详细解释： 1. **使用`clear:both`** 当一个元素设置`clear:both`时，这个...
css清除浮动的几种方法和示例
09-25
以下介绍几种常见的CSS清除浮动的方法： 1. 使用`clear`属性： 这是最基础的清除浮动方式。通过设置`clear`属性，我们可以指定元素不允许与浮动元素相邻。例如，将`.clr{clear:both;}`应用到元素上，使得这个元素...
为Matlab 用户提供丰富功能的工具集
11-03
Matlab 用户提供丰富功能的工具集。 从优点来看，其涵盖了诸多实用的功能模块。例如在计算机视觉和图像处理领域，可能包含了图像特征提取、目标检测、图像分割等常用算法的实现，这为相关领域的研究人员和开发者节省了大量的时间和精力，无需从头编写复杂的算法代码，提高了开发效率。工具包的文档相对较为详细，能够帮助用户快速上手并理解各个函数和工具的使用方法，降低了使用门槛。同时，它可能具有较好的兼容性，能够与 Matlab 的原生功能和其他常用工具箱协同工作，方便用户整合到自己的项目中。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
技术资料分享KXTE9-2050 Specifications Rev 3非常好的技术资料.zip
11-03
技术资料分享KXTE9-2050 Specifications Rev 3非常好的技术资料.zip
yolo算法-废物数据集-1000张图像带标签-金属废料-杯子-垃圾桶-废物-纸张-塑料-瓶-有机废物.zip
11-03
yolo系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，包含数据集配置文件data.yaml，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法； 包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中; yolo格式：<class> <x_center> <y_center> <width> <height>， 其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值
VB程序实例-使用Stream读写存储的图像.zip
11-03
VB程序实例-使用Stream读写存储的图像.zip
VB程序实例78_系统操作_锁定计算机.zip
11-03
VB程序实例，可供参考学习使用，希望对你有所帮助
pytz-2016.7-py2.6.egg
最新发布
11-03
pytz库的主要功能 时区转换：pytz库允许用户将时间从一个时区转换到另一个时区，这对于处理跨国业务或需要处理多地时间的数据分析尤为重要。 历史时区数据支持：pytz库不仅提供了当前的时区数据，还包含了历史上不同时期的时区信息，这使得它在处理历史数据时具有无与伦比的优势。 夏令时处理：pytz库能够自动处理夏令时的变化，当获取某个时区的时间时，它会自动考虑是否处于夏令时期间。 与datetime模块集成：pytz库可以与Python标准库中的datetime模块一起使用，以确保在涉及不同时区的场景中时间的准确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值