×

clearfix c ea

clearfix（clearfix:after 清除浮动的方法在dreamweaber 里显示错位）

admin admin 发表于2023-01-23 22:56:33 浏览53 评论0

抢沙发发表评论

本文目录

clearfix:after 清除浮动的方法在dreamweaber 里显示错位

如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开。
解决方法：
CSS代码：
代码如下:
.clearfix:after{
content:“.“;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display:inline-block;}
/*HidesfromIE-mac*/
*html.clearfix{height:1%;}
.clearfix{display:block;}
/*EndhidefromIE-mac*/
//clearfix的CSS使用了after这个伪对象
//应用clearfix的元素的结尾添加content中的内容
//转移字符“”，MacIE浏览器会忽略掉这段Hack，但是WindowsIE不会
以下是详细解释：
首先清除浮动的原理，其实是元素留出足够多的垂直外边距给浮动的元素。
代码如下:
《div》
《divstyle=“float:left“》《/div》
《/div》
这个效果是外层div不会包含内层div。因为浮动的元素脱离了原始文档流。
以上面这个为例：一般而言，有三种方式清除浮动
。第一：让外层元素也浮动，例如：
代码如下:
《divstyle=“float:left“》
《divstyle=“float:left“》《/div》
《/div》
然后再此元素之外的元素上添加clear：both效果。
第二：给外层div的末尾添加一个元素，并利用此元素清楚浮动。
具体用法：
代码如下:
《divstyle=“clearfix“》
《divstyle=“float:left“》《/div》
《/div》
.clearfix:atfer{
content:“.“;
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix{display:inline-block}
.clearfix{display:block}
其中后面的两个是为了兼容其他浏览器设置的。因为：after不是所有浏览器都支持的。
第三：利用overflow属性
代码如下:
《divstyle=“overflow:hidden“》
《divstyle=“float:left“》《/div》
《/div》

.clear和.clearfix:after的区别，分别什么样的情况下使用

这跟优化有什么关系？ 这两条CSS是不同的两个东西怎么能比较哪个好坏呢？ .clear是选择器而已，就是为class为clear的元素规定样式 .clear:after是加外一种东西，after是个伪元素，意思就是在class为clear的元素后面加入新内容。 clearfix:after{clear:both;content:“.“;display:block;height:0;在这里，是用来清除浮动用的

class=\“clearfix\“什么意思

  • 这个的意思就是说 ：变量 class 给它赋值，赋值为【“clearfix“】，符号【\】反斜杠是转义字符，因为双引号是 特殊字符，所以必须加转义，告诉电脑，这个你要当做字符串使用，而不是引号使用。

  • 这是什么里面的？
    意思是定义一个分类，赋值为clearfix

网页CSS中的.clearfix是什么意思图文教程

自设class名。一般约定俗成的是清除浮动。

.clearfix{
    overflow:hidden;
    clear:both;
    width:0;
    visibility:hidden;
    }

当然咯。还有简单的方法。就是在当前元素的父级元素上添加overflow：hidden（有局限性，不过简便）

css clearfix清除浮动是什么意思

clearfix的定义：
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类名就好了。

.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; }

html中clearfix:after也clear：both有什么区别

  • ①:after是选择器，伪元素之一，用于在指定元素如clearfix后面添加内容，用content:“这里是内容“;②clear:clear;是属性值，用于清除附近浮动元素的影响。

  • clearfix:after 是清除盒子内部元素的浮动。IE67不支持。
    clear：both 清除之前元素浮动影响。

.clearfix {*zoom:1;_height:1px} CSS的这句声明的zoom前的*和height前的_起到什么作用

这个是hack写法，用来识别不同版本的IE浏览器。*后面的属性 IE6 IE7能识别，IE8 IE9……都不能识别；“_“后面的属性，只有IE6能识别，解决方法如下：

1、首先新建一个html文件，命名为test.html。

2、在test.html文件中，分别给两个p标签设置class属性，分别为n1，n2。主要用于下面分别对p标签使用line-height和height样式，讲解它们的区别。

3、为了展示明显的效果，在css标签内，使用css设置p标签的样式，定义p元素为1px灰色边框，宽度为300px，并使用margin-bottom设置两个p标签相隔10px。

4、在css标签内，通过class类名，分别使用line-height和heignt属性设置两个p标签的样式。

5、最后在浏览器打开test.html文件，查看实现的效果。