css clearfix清除浮动是什么意思

如题所述

clearfix的定义:

[css] view plain copy print?
.clearfix:after {}{
content: "."; /**//*内容为“.”就是一个英文的句号而已。也可以不写。*/
display: block; /**//*加入的这个元素转换为块级元素。*/
clear: both; /**//*清除左右两边浮动。*/
visibility: hidden; /**//*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;*/
line-height: 0; /**//*行高为0;*/
height: 0; /**//*高度为0;*/
font-size:0; /**//*字体大小为0;*/
}

.clearfix {}{ *zoom:1;} /**//*这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/

.clearfix的原理:

1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。
2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。
3、在需要清除浮动的时候,只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。
温馨提示:内容为网友见解,仅供参考
无其他回答

css clearfix清除浮动是什么意思
clearfix的定义:[css] view plain copy print?.clearfix:after {}{ content: "."; \/**\/\/*内容为“.”就是一个英文的句号而已。也可以不写。*\/ display: block; \/**\/\/*加入的这个元素转换为块级元素。*\/ clear: both; \/**\/\/*清除左右两边浮动。*\/ visibility: hidden; \/...

清除浮动指什么? 如何清除浮动?
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。清除浮...

前端:用clearfix清除浮动的简单介绍
理解clear清除浮动的核心在于正确应用clear属性的位置,以确保浮动元素可以正常排列且不影响页面布局。正确的应用和理解可以避免常见的布局问题,使网页设计更加灵活和优雅。

IE浏览其中float布局中的文档流,浮动,定位和清除浮动(clearfix)详解
在CSS学习中,文档流、浮动、定位和清除浮动(clearfix)的概念很重要。让我们深入了解这些概念:文档流是网页的基础,元素默认遵循它,由block和inline元素组成。在HTML5中,通过display属性区分,如block元素(如)和inline元素(如)。display: inline-block则兼具两者特性。要让元素脱离文档流,有两种方式...

带你玩转清除浮动
③after伪元素法(开发中常用)我们提前在css文件中写好clearfix这个属性,为其添加after伪元素,需要清除浮动的时候只需要为元素添加上clearfix这个类名即可;这其实上就是刚刚那种方法的变形而已,其底层原理是一样的,都是在父元素的后面添加了一个样式为clear:both的块级元素,只不过一个是嵌套在html...

关于清除浮动的方法
伪元素清除浮动是伪元素的用途之一,这是清除浮动的一个相对比较好的方法,可以减少无意义的标签,使得html尽量简单。可以在浮动元素的容器内增加一个class类,比如说取名为clearfix。然后在clearfix里面添加一个伪元素,只能用after,利用这个看不见的元素来清除浮动。这里要注意的一点伪元素生成的默认是行...

CSS中清除浮动的几种方法
三、overflow:hidden;本意就是清除溢出到盒子外面的文字。但是,它能作为偏方来清除浮动。注意:一般不使用此方法,因为溢出这个元素所在的区域会被隐藏。四、使用伪元素.clearfix:after { content: '';height: 0;line-height: 0; \/*或 overflow:hidden*\/ display: block; visibility: hidden; clear:...

css中清除浮动的方法有哪些
`元素,并为其应用`.clearfix`类,该类包含`clear: both;`样式,以清除浮动。二、使用伪元素清除浮动 可以使用CSS伪元素`:after`来清除浮动。通过在父元素中添加`clearfix`样式,并在其`:after`伪元素中设置`content: ""; display: table; clear: both;`,可以有效地清除浮动。这种方法不需要添加...

清除浮动的方法有哪些
清除浮动的方法有clearboth的方法、设置clearfix的方法、overflow的方法以及给父元素设置双伪元素的方法在我们写代码的时候,有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示,接下来在文章中将为大家详细介绍几种清除浮动的方法,具有一定的参考价值,希望对大家有所帮助。【推荐课程:CSS课程...

clearfix类clearfix
1、自设class名。2、一般约定俗成的是清除浮动。3、.clearfix{    overflow:hidden;    clear:both;    width:0;    visibility:hidden;    }当然咯。4、还有简单...

相似回答