clearfix在960grid中.clearfix:before,什么意思

clearfix 时间:2021-07-19 阅读:()

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

display:block; 块级显示新行开始，高度，顶底为可控 display：inline-block；内联显示，即同一行显示由于浏览器的不同，就导至一些浏览器不兼容的问题，IE就是其中一个解决IE bug方法有2种 1.先使用display:inline-block;触发内联显示，再用display:block触发块以解决在IE中因为内联而无法设置高度，顶底问题 2.就是设置为.clearfix { display:inline;zoom:1; }

clearfix到底是啥？

在这个clearfix类的后面加上这些属性，content:"."——插入一点display:block——显示，带有换行符height:0——高为0个像素clear:both——左右两侧不允许浮动visibility:hidden——隐藏该元素

兄弟们，问个弱智的问题啊： <div class="menu clearfix">测试</div> 这里menu clearfix是分别获取menu和c

分别获取两个样式。

同一个div我们可以给他两个class名称，分别进行样式定义，一个是menu 一个是clearfix。

如果没有空格就是一个，如果有空格就是两个，在家过空格，我们仍然可以在后面在追加一个class名称，然后继续添加样式。

.menu ｛XXX｝ #menu {XXXX} 这样命名不会出问题，这是两个不同的选择器，一个是类选择器一个是id选择器，正常情况下 id选择器在一个站点中只能使用一次，而类选择器可以重复使用。

这样命名有不好的地方就是容易搞混淆，如果不是同一个元素的话。

以下的CSS代码中AFTER怎么理解？

以下的CSS代码中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类名就好了。

如： div class="head clearfix">/div> 解说完毕，希望对你有帮助。

一年好运随春到四季彩云滚滚来万事如意

<div class="sitenav clearfix"> 这个引用的css 为什么有个空格，这样写有什么好处？为什么不写在一个里

这个DIV同时执行 sitenav? clearfix 这两个样式表 <!DOCTYPE?HTML> <html> <head> <meta?charset="utf-8"> <title>无标题文档</title> <style> .class1{width:100px;?height:?100px;} .class2{background:?red;} </style> </head> <body> <div?class="class1?class2"> </div> </body> </html>好处没发现过，应该是这个DIV正好能满足这两个样式的条件，直接调用而已