css用clearfix清除浮動

什麼是.clearfix

.clearfix:after 

.clearfix 
<
div 
class
="clearfix"
>
<
div 
class
="floated"
>
div>
div>

上面的**就是.clearfix的定義和應用，簡單的說下.clearfix的原理：

1、在ie6, 7下zoom: 1會觸發haslayout，從而使元素閉合內部的浮動。

2、在標準瀏覽器下，.clearfix:after這個偽類會在應用到.clearfix的元素後面插入乙個clear: both的塊級元素，從而達到清除浮動的作用。

3、在需要清除浮動的時候，只要寫乙個.clearfix就行了，然後在需要清浮動的元素中 新增clearfix類名就好了。

<

html 
>
<
head
>
<
title
> css用clearfix清除浮動例項
title
>
<
meta 
name
="generator"
content
="editplus"
/>
<
meta 
name
="author"
content
=""/>
<
meta 
name
="keywords"
content
=""/>
<
meta 
name
="description"
content
=""/>
head
>
<
body
>
<
style 
type
="text/css"
>
/*所有主流瀏覽器都支援 :after 偽元素。
*/.clearfix:after
.clearfix
/*不知道有什麼用處，不加ie7也沒有問題
*/.box
.l.r
.sstyle
>
<
div 
class
="box clearfix"
>
<
div 
class
="l"
>left
div>
<
div 
class
="r"
>right
div>
<
div 
class
="s"
>absolute
div>
div>
body
>
html
>

CSS之關於clearfix 清除浮動

一，什麼是.clearfix 你只要到google或者baidu隨便一搜 css清除浮動 就會發現很多 都講到 盒子清除內部浮動時可以用到.clearfix clearfix after clearfix div class clearfix div class floated div div 上面...

CSS之使用clearfix清除浮動

block一般乙個塊佔一行，除非float inline是自動排為一行，就象段內的文字一樣，可成為多行。clear both 語法 clear none left right both none 允許兩邊都可以有浮動物件 both 不允許有浮動物件 left 不允許左邊有浮動物件 right 不允許...

清除浮動（clearfix）

web前端 2008 12 07 15 52 02 閱讀1089 字型大小 大 中小訂閱 在寫html 的時候，發現在firefox等符合w3c標準的瀏覽器中，如果有乙個div作為外部容器，內部的div如果設定了float樣式，則外部的容器div因為內部沒有clear，導致不能被撐開。看下面的例子 ...