眾所周知，css浮動在日常頁面運用中起到非常重要的作用。
例如，我們可以利用浮動來實現多欄布局等。如下圖，qzone利用浮動來實現雙欄布局的示例：
它的頁面**是這樣的（主要）：
html部分：
css部分（主要）：
.col_menu
.col_main
不難看出，qzone是通過給左右欄定寬並且浮動來實現的。
html部分：
很明顯在保持同樣html結構的情況下，實現兩欄布局可以有多種css方案實現（左欄定寬），主要方向是用浮動或不用浮動，右欄定寬或者不定寬：
qzone、朋友網、facebook都給左欄浮動，唯一不同的是右欄的寫法，qzone給右欄定寬並且浮動，而朋友網和facebook則並沒有給右欄定寬也未浮動，而是利用了建立bfc並且為低版本ie觸發haslayout的原理讓右欄自適應寬度。
yahoo和google兩欄都未用浮動，唯一不同的是yahoo用了絕對定位的方法，而谷歌用了inline-block，google已經宣布旗下一些產品放棄對ie8 的支援，所以google可以大膽的使用inline-block去實現布局，不用去為其他低版本瀏覽器寫一大堆的hack。
說了css浮動，現在說說清除浮動的幾種方法
採用乙個html標籤，以及css的clear屬性，來手工清理浮動；
採用偽類:after，動態建立乙個塊元素，設定 clear 屬性，清理之前的浮動元素；
採用css overflow 非 visible 值(overflow:auto/overflow:hidden)設定使父容器包含浮動元素；
採用display:table/display:table-cell 等table系列屬性將父元素變成 table 形式自動包含浮動元素；
使用 table 以及 td 標籤作為浮動元素容器；
採用 float:left/float:right 方式將父元素同樣浮動，就可以包含浮動內容；
在 ie 6/7 的標準文件模式中設定 「width/height/zoom」 等樣式來自動清理浮動。
清除浮動根本方法歸類
1.使用css 1就提供的用來清除浮動的樣式 clear，如：方法 1，方法 2
2.建立bfc，如：方法,3,4,5,6,7
3.觸發haslayout 如：方法6,7
常用方法
方法1,3,6,7
CSS浮動以及清除浮動
傳統網頁布局的三種方式 本質 用css擺放盒子。實際開發中，乙個頁面基本都包含了這三種布局方式 1 普通流 標準流 文件流 最基本的布局方式 標籤按照規定好預設方式排列 浮動 float屬性用於建立浮動框，將其移動到一邊知道左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。要想塊元素水平排列如果轉換成行...
CSS的浮動以及清除浮動
給元素新增了float屬性 float left,float right 可以讓元素進行橫向排列 做文字圍繞效果 因為文件流元素會忽視浮動元素的存在，但是文件流元素的文字卻不會。新增了float屬性後，該元素會脫離正常的文件流，所以會覆蓋其他的元素，父元素由於沒有被撐開，造成了高度塌陷。所以清除浮動...
css的浮動以及清除浮動的方法
內聯元素可以分為替換元素和非替換元素 替換元素 非替換元素 內聯元素設定padding 內聯元素一樣可以設定padding 左右方向的padding會生效,也會達到預期的效果 上下方向的padding會生效,但是不會影響布局,就是說設定上了,但是元素不會有任何移動之類的.內聯元素設定border 設...