先說一下浮動的基本定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到父級邊界或另乙個浮動框的邊框為止。由於浮動框不在文件流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。那麼就要說一下文件流了，文件流是文件中可顯示物件在排列時所占用的位置（可以認為各個元素原本預設的位置）。那我們在實際應用**會遇到這種問題呢。例如我們現在需要把幾個塊級元素放在一排，我們可以使用display：inline；但是這樣我們無法改變高度，也可以使用display：inline-block；但是這樣的話也存在換行符被解析，ie6、ie7不相容的問題。現在可以使用float來修飾，下面我們說一下不同的實現方法並對其進行說明：
要想使用float，先來簡單介紹一下
float浮動：
1、塊在一排顯示（使塊元素在一排顯示）
2、內聯支援寬高（使內聯元素支援設定高度）
3、預設內容撐開寬度（沒有寬度自動撐開）前幾個與inline-block效果相同
4、脫離文件流（浮動元素有可能會覆蓋正常文件流中內容）
5、提公升層級半層（浮動會擠開元素內的內容）
float:left | right | none | inherit;（左，右，沒有浮動，與父類相同）
clear:left | right | both | none | inherit；元素的某個方向上不能有浮動元素（左，右，左右兩邊，無，繼承父類）
如果兩個元素乙個帶float乙個不帶，帶浮動的會浮動半層，飄起來覆蓋住另乙個元素。但在使用過程中浮動也會帶起意想不到的問題：如果父類包含乙個浮動元素，浮動元素並不會撐開父類造成意想不到的問題，下面有幾種解決辦法：
1.加高（給父類加乙個固定高度）
問題：擴充套件性不好（如果使高度，接下來如果內容更改，也必須同時更改父類的高）
2.父級浮動（給父類也加上浮動）
問題：頁面中所有元素都加浮動，margin左右自動失效（floats bad ！）
3.inline-block 清浮動方法：
問題：margin左右自動失效；
4.空標籤清浮動（定義乙個空div，並清除左右浮動）
問題：ie6 最小高度 19px；（解決後ie6下還有2px偏差）
5.br清浮動（給浮動元素後加上br標籤，並清除左右浮動）
問題：不符合工作中：結構、樣式、行為，三者分離的要求。
6.after偽類 清浮動方法（現在主流方法）
.clear:after
.clear
:after ie6，7下不相容
zoom 縮放
a、觸發 ie下 haslayout，使元素根據自身內容計算寬高。
b、ff 不支援；
7.overflow:設定是否顯示滾動條；
問題：需要配合 寬度 或者 zoom 相容ie6 ie7；
overflow: scroll | auto | hidden；
overflow:hidden;溢位隱藏（裁刀！）
css基礎 float浮動
doctype html html lang en head meta charset utf 8 title float title style body per red style head body div class per div class red div 層疊樣式表 英文全稱 casc...
CSS基礎知識總結之浮動詳解
前言 day4主要講述了乙個重點，那就是浮動 其中包含，什麼是浮動？浮動的作用語法及浮動的清除等 1 css的三種布局機制 css 提供了 3 種機制來設定盒子的擺放位置，分別是普通流 標準流 浮動和定位，其中 1 普通流 標準流 常用元素 div hr p h1 h6 ul ol dl form ...
CSS入門基礎知識（十三） 浮動（一）
網頁布局的本質 用css來擺放盒子。把盒子擺放在相應的位置。css提供了三種傳統布局方式 1 普通流 標準流 2 浮動 3 定位 所謂的標準流 就是標籤按照規定好預設方式排列 1 塊級元素會獨佔一行，從上向下順序排列 2 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行 3 常用元素 ...