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

css中的content: "."; 这段代码到底是什么意思？

该属性用于定义元素之前或之后放置的生成内容。

默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。

这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。

在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏，这样就达到了撑开容器的目的。

扩展资料： content，英文单词，有满足的、使满足、目录等含义。

同时也是计算机语言的一种方法。

计算机语言 概述 contents() 方法 找到段落中的所有文本节点，并用粗体标签包装它们。

("p").contents().filter(function(){returnthis.nodeType!=1;}).wrap("<b/>"); 定义和用法 contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。

语法 .contents() 说明 如果给定表示 DOM 元素集合的 jQuery 对象，.contents() 方法允许我们检索 DOM 树中的这些元素的直接子节点，并用匹配元素构造新的 jQuery 对象。

.contents() 和 .children() 方法类似，不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素。

.contents() 方法也可以用于获得 iframe 的内容文档，前提是该 iframe 与主页面在同一个域。

参考资料来源：百度百科-content

.box:after{content:"020";display:block;height:0;clear:both;} 这是css里的，请问这是什么意思啊？

这是一段用于清除浮动（clearfix）的代码，防止后边的容器因为浮动出现布局的混乱。

这个 "020"表示转移字符的空格。

这样写好像没什么必要，直接写空格就可以，而且貌似浏览器对生成内容中的转义字符的支持并不好。

在 clearfix 中，content 的内容可以为空，即 {content: ""; ...} ，兼容性更好。

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不会包含内层div。

因为浮动的元素脱离了原始文档流。

以上面这个为例：一般而言，有三种方式清除浮动 。

第一：让外层元素也浮动，例如： 代码如下: 然后再此元素之外的元素上添加clear：both效果。

第二：给外层div的末尾添加一个元素，并利用此元素清楚浮动。

具体用法： 代码如下: .clearfix:atfer{ content:"."; display:block; visibility:hidden; height:0; clear:both; } .clearfix{display:inline-block} .clearfix{display:block} 其中后面的两个是为了兼容其他浏览器设置的。

因为：after不是所有浏览器都支持的。

第三：利用overflow属性 代码如下: