這段代碼中的content: ".";有什么用，解決了什么問(wèn)題，為什么要用他？

代碼如下:

.clearfix:after {

clear: both;

content: ".";

display: block;

height: 0;

visibility: hidden;

}

1--

在寫(xiě)HTML代碼的時(shí)候，發(fā)現(xiàn)在Firefox等符合W3C標(biāo)準(zhǔn)的瀏覽器中，如果有一個(gè)DIV作為外部容器，內(nèi)部的DIV如果設(shè)置了float樣式，則外部的容器DIV因?yàn)閮?nèi)部沒(méi)有clear，導(dǎo)致不能被撐開(kāi)。

這個(gè)clearfix的CSS使用了after這個(gè)偽對(duì)象，它將在應(yīng)用clearfix的元素的結(jié)尾添加content中的內(nèi)容。在這里添加了一個(gè)句號(hào)"."，并且把它的display設(shè)置成block；高度設(shè)為0；clear設(shè)為both；visibility設(shè)為隱藏。這樣就達(dá)到了撐開(kāi)容器的目的啦。

2--

content的語(yǔ)法倒是很少用，剛剛查了下資料：

語(yǔ)法：

代碼如下:

content : attr(alt) | counter(name) |

counter(name , list-style-type) |

counters(name , string) |

counters(name , string , list-style-type) |

no-close-quote | no-open-quote | close-quote |

open-quote | string | url(url)

取值：

attr(alt)

:

使用對(duì)象的 alt 屬性的文字

代碼如下:

counter(name)

:

使用已命名的計(jì)數(shù)器

代碼如下:

counter(name, list-style-type)

:

使用已命名的計(jì)數(shù)器并遵從指定的 list-style-type 屬性

代碼如下:

counters(name, string)

:

使用所有已命名的計(jì)數(shù)器

代碼如下:

counters(name, string,

list-style-type)

:

使用所有已命名的計(jì)數(shù)器并遵從指定的 list-style-type 屬性

代碼如下:

no-close-quote

:

并不插入 quotes 屬性的后標(biāo)記。但增加其嵌套級(jí)別

代碼如下:

no-open-quote

:

并不插入 quotes 屬性的前標(biāo)記。但減少其嵌套級(jí)別

代碼如下:

close-quote

:

插入 quotes 屬性的后標(biāo)記

代碼如下:

open-quote

:

插入 quotes 屬性的前標(biāo)記

代碼如下:

string

:

使用用引號(hào)括起的字符串

代碼如下:

url(url)

:

使用指定的絕對(duì)或相對(duì) url 地址 說(shuō)明：用來(lái)和 :after 及 :before 偽元素一起使用，在對(duì)象前或后顯示內(nèi)容。對(duì)應(yīng)的腳本特性為 content 。示例：

代碼如下:

p:after { content: url("http:www.devguru.com");

text-decoration: none; }

p:before { content: url("beep.wav") }

你所問(wèn)的問(wèn)題：根據(jù)語(yǔ)法，應(yīng)該屬于取 “ string :　 使用用引號(hào)括起的字符串 ”應(yīng)該意思就是 在.clearfix對(duì)象之后顯示 . 這個(gè)字符吧

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄