伪元素清除浮动？这个你了解吗？

随着前端的不断发展，面对浮动这个问题我们一般喜欢用伪元素清除浮动，下面这段样式号称万能清除浮动

.clearfix:after { content: "."; display: block; height: 0; clear: both; }

.clearfix { zoom: 1; }

看着好像没啥为题呀，但是最近小弟遇到个问题（360极速浏览器）：

伪元素是在clearfix元素后产生一个清除浮动的块级元素，并且用content的内容填充，但是有些浏览器会产生这个例如“.”占位的问题（实际生产环境中），

小弟审查了半天才发现是这个问题，于是把content的内容进行了清空，结果解决了问题！

哪位大神有更深刻的领会？请指教！

时间： 2024-08-07 08:16:33

伪元素清除浮动？这个你了解吗？的相关文章

双伪元素清除浮动理解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .fl{ float:left; } .box1 { width: 300px; height: 100px; background: red; } .box2 { width: 300px; height

BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”. 先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素.所以,BFC元素是不可能发生margin重叠的,因为margin重叠会影响外面的元素的:BFC元素也可以用来清除浮动带来的影响,因为如果不清除,子元素浮动

伪元素清除浮动（重要）

让页面呈现多列布局时经常会使用 float:left/right ,可是浮动布局会导致父元素的高度为0(未设置高度的情况下),不会根据子元素的高度而变化,另外,后面不需要浮动想在下一行显示的标签出现在浮动元素的后面. #content{background:#000;} .left{width:100px;height:100px;background:#eee;margin:0 10px;float:left;} 所以我们在使用浮动进行布局的时候会需要一个块级元素(行内元素无效)来设置 cl

伪元素清除浮动及原理

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } 1) display:block 使生成的元素以块级元素显示,占满剩余空间; 2) height:0 避免生成内容破坏原有布局的高度. 3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互; 4)通过 cont

知道css有个content属性吗？有什么作用？有什么应用？可以伪类清除浮动

知道.css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. .clearfix:after { content:"."; //这里利用到了content属性 display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } after伪元素通过 content 在元素的后面生成了内容为一个点的块级素,再利用clear:b

使用after伪类清除浮动

.department li:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } 使用after伪类清除浮动

使用 after 伪类清除浮动

以前清除浮动的时候总是在想要清除浮动的元素后面添加 1 <div style="clear:both;"></div> 或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器 1 .clearfix:after{ 2 content:""; 3 display:block; 4 height:0; 5 clear:both; 6 visibility:hidden; 7 } 为兼容IE6,IE7,因为

管好调皮的熊孩子——通过伪类清除浮动

这学期开始学习我导师主讲的<WEB程序设计>,自己以前做PHP的时候也算是写了很多前段代码,但都是抱着使用的目的去学的,没有系统学习,借着这学期的课,也对这种学习陋习留下的漏洞补补窟窿,做做笔记. 在样式中使用浮动属性的时候常常会想要做这样类似的布局: 根据上面的效果图,很容易就可以写出这样的div布局: <div class="father"> <div class="title"></div> <div cl

伪元素清除最后一个border的边框

css代码: 1 *{ margin: 0; padding: 0; } 2 ul, li{ list-style: none; } 3 #ul1{ border: 1px solid red; } 4 #ul1 li{ border: 1px solid green; } 5 #ul1:after{ content: ""; display: block; height: 1px; margin-top: -1px; background: #fff; } html代码: 1 <