CSS之使用clearfix清除浮動

2021-08-28 01:36:32 字數 2847 閱讀 8472

block一般乙個塊佔一行,除非float

inline是自動排為一行,就象段內的文字一樣,可成為多行。

clear:both

語法:clear : none | left |right | both 

none :  允許兩邊都可以有浮動物件

both :  不允許有浮動物件

left :  不允許左邊有浮動物件

right :  不允許右邊有浮動物件

說明:該屬性的值指出了不允許有浮動物件的邊。請參閱float屬性。

!important 具有優先權,提公升指定樣式規則的應用優先權。

示例:div

display:inline|block

display:inline比較經典的用法是用在

用了很久這樣的方法,每次寫repeater繫結的時候都要加個

的標籤,以

前沒有注意到這方面的東西.今天重新寫樣式的時候,就上網搜了下替代的方法.果然在google中搜到了一

篇how to clear floats without structural markup的文章,靈活的處理了清空浮動的問題

首先設定**為:

.clearfix:after

這樣我們只要對父級div引入這個clearfix的類即可,即

這個css的原理是經過使用after偽物件,它將在應用clearfix的元素結尾新增content中的內容,也就是一

個".",並且把他設定為塊級元素(display="block");高度設定為0,clear="both",然後將其內容隱藏掉

(visibility="hidden").這樣就會撐開此塊級元素.

但是,ie並不支援.所以如果你需要相容ie瀏覽器的話,可以設定以個hack.

.clearfix:after

* html .clearfix

這樣我們就可以只在父級div引用class類解決了繁瑣的清空步驟.

下面給出別的**清空浮動的**:

/* 豆瓣的clear both方式 */

.clearfix:after

.clearfix

*html .clearfix

*+html .clearfix

.clearfix

css hack 用來讓網頁相容各種瀏覽器(在各種環境下都能「正確的」顯示)

*+html 與 *html 是ie特有的標籤, firefox 暫不支援.而*+html又為ie7特有標籤.

/*蝦公尺的方式*/

.clearfix:after

直接copy下bootstrap裡面的clearfix寫法:

.clearfix

.clearfix:before, .clearfix:after

.clearfix:after

.clearfix

在乙個有float 屬性元素的外層增加乙個擁有clearfix屬性的div包裹,可以保證外部div的height,即

清除"浮動元素脫離了文件流,包圍和文字的 div 不佔據空間"的問題。

看到」閒聊css之關於clearfix–清除浮動「 (的文章給

了乙個比較清晰的分析:

構成block formatting context的方法有下面幾種:

float的值不為none。

overflow的值不為visible。

display的值為table-cell, table-caption, inline-block中的任何乙個。

position的值不為relative和static。

很明顯,float和position不合適我們的需求。那只能從overflow或者display中選取乙個。

因為是應用了.clearfix和.menu的選單極有可能是多級的,所以overflow: hidden或overflow: auto也不

滿足需求

(會把下拉的選單隱藏掉或者出滾動條),那麼只能從display下手。

我們可以將.clearfix的display值設為table-cell, table-caption, inline-block中的任何乙個

但是display: inline-block會產生多餘空白,所以也排除掉。

剩下的只有table-cell, table-caption,為了保證相容可以用display: table來使.clearfix形成乙個block formatting context因為display: table會產生一些匿名盒子,這些匿名盒子的其中乙個(display值為table-cell)會形成block formatting context。這樣我們新的.clearfix就會閉合內部元素的浮動。

這就是為什麼選擇display:table的原因。

firefox不支援float:right

/********replace float:right********************/

.vjs-default-skin .vjs-volume-menu-button

.vjs-default-skin .vjs-fullscreen-control

/*.vjs-default-skin .vjs-volume-menu-button

.vjs-default-skin .vjs-fullscreen-control*/

/*******replace float:right*********************/

CSS之關於clearfix 清除浮動

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

閒聊CSS之關於clearfix 清除浮動

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

閒聊CSS之關於clearfix 清除浮動

一,什麼是.clearfix 你只要到google或者baidu隨便一搜 css清除浮動 就會發現很多 都講到 盒子清除內部浮動時可以用到.clearfix clearfix after clearfix 上面的 就是.clearfix的定義和應用,簡單的說下.clearfix的原理 1 在ie6,...