.clearfix:after(清除浮动)中各个属性及值详细解说

清除浮动.clearfix:after一词,从事web前端的朋友们对此不会陌生吧,下面为大家介绍的是.clearfix:after中用到的所有属性及值的含义,对此感兴趣的朋友可以参考下哈想,希望对大家有所帮助

.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容; 
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的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。

整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。 
之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动。

话说回来,你这段代码真是个累赘啊,这样写不利于维护。 
只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。

参考这个,再加上各种碰到遇到解决明白了

时间: 2024-11-10 15:18:29

.clearfix:after(清除浮动)中各个属性及值详细解说的相关文章

css 清除浮动 定位 z-index属性

当一个父元素包含多个浮动的子元素的时候,子元素的浮动确定了他们的位置,但是子元素不会影响父元素的宽度,使父元素塌陷,从而使父元素高度为0,这个时候可以为父元素清除浮动,从而阻止父元素塌陷. 1.overflow方法 对父元素设置overflow:hidden: 但是overflow清除浮动会有一些缺点. 2.clearfix方法 清除浮动更好的方法是clearfix "clearfix"技巧是基于在父元素上使用":before"和":after"

zoom在清除浮动中的利用

zoom 是个困惑了好久的元素,今天对它有了个初步的认识 zoom , ie 的专属属性,在其他浏览器中不起作用,它的原本功能是设置或检测对象的缩放比例(只在ie下起作用) 比如 <div style="background:#f0f3f9; padding:20px; zoom:2;"> <img data-src="http://XXXXX.jpg" border="0" /> </div> 在ie中它会使

.clearfix:after 清除浮动

.clearfix:after {content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size: 0;} .clearfix{*zoom:1;} 各个属性解释:.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容: content: ""; <----内容. display:

react 不能往组件中传入属性的值为 undefined

在使用 andt design 的时候遇到个需求,需要清除 Select 组件选中后的值,让它变成什么都没选中,显示 placeholder 刚开始以为设置为 null 即可,结果发现设置为 null 并没什么卵用,只是得到什么都没匹配上的结果,选择框中为空. 后来发现将 value 值设置为 undefined 即可. 其实,在 react 中,传入 undefined 就代表什么都没传入,这时组件中如果有默认的 props 值则会使用默认值. 所以,上面传入 null,其实也是传入了值,所以

javascript获取对象中的属性及值

function displayProp(obj){ var names=""; for(var name in obj){ names+=name+": "+obj[name]+", "; } alert(names); } 多美完美的体验.跟java的反射很像.

javascript查看一个对象中的属性和值,包括里面有嵌套的情况。

function f(obj){            var s="";            for(prop in obj){                var temp=typeof obj[prop];                                if(temp==="object"){                    s+=prop+":"+"{"+f(obj[prop])+"

CSS中的浮动和清除浮动

浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场景. 浮动有哪些特征? 浮动的特征就体现在前文的那句话中

CSS中的浮动和清除浮动,梳理一下!

CSS中的浮动和清除浮动,梳理一下! 第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧. 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline

【转】CSS中的浮动和清除浮动

以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场景.