前言：本文主要介紹css中的float定位，包含大量代碼和圖片，手機用戶請多包涵！喜歡的朋友可以關注我的頭條號！
目錄：
1.元素的定位方式
2. 浮動定位(float)的初衷
3.float初衷下的具體應用
4. 浮動的概念理論
5.float在網頁中常見應用
6.float在網頁中常見應用5:鮮花布局
7. 浮動使用的技巧擴展（有能力則學習）
8. 浮動的遺憾
1.元素的定位方式
瀏覽器加載標籤時，不僅需要計算為標籤預留多大的一個框用於顯示標籤(因此標籤也成為框元素)，還需要計算在哪個位置開始顯示標籤，即標籤的定位方式。
標籤的定位方式有以下三種：
（1）標準文檔流方式，後續講；
（2） 浮動定位方式，(本次講)；
（3）絕對定位方式 ，position知識點時講;
2. 浮動定位(float)的初衷
解決圖片的文字環繞效果。
3.float初衷下的具體應用
3.1.float應用1：大倍字體下沉效果
3.1.1. 效果
3.1.2 代碼
.firstLetter{
font-size:3em;
color:#990000;
float:left;
}
W3C釋義
W3C
是英文 World Wide Web Consortium 的縮寫，
中文意思是W3C理事會或萬維網聯盟。W3C於1994年10月在麻省理工學院計算機科學實驗室成立。創建者是萬維網的發明者Tim Berners-Lee。創建者是萬維網的發明者Tim Berners-Lee。創建者是萬維網的發明者Tim Berners-Lee。創建者是萬維網的發明者Tim Berners-Lee。創建者是萬維網的發明者Tim Berners-Lee。
3.2.float應用2:圖文混排文字環繞效果
3.2.1 效果
3.2.2 代碼
.father {
border: 1px solid #CCC;
padding: 5px;
}
p { font-size: 14px;color: #039; }
.son1,.son2,.son3 {
padding: 10px; margin: 15px;
border: 1px solid #090;
float: left;
}
.son3 { float: right; }
本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。本報。。。
3.3.float應用3 標題居中的效果
4. 浮動的概念理論
4.1. 飄零零
4.2 W3CSchool
4.3 浮動定位的官方指導實驗與案例（W3C）
(1)右浮動
(2)左浮動
(3)同高度和不同高度的浮動框
(4)圖像+文字的環繞效果，浮動框+行框
5.float在網頁中常見應用4:列表項橫向顯示
5.1. 應用場景
橫向菜單、博客
5.2 效果
5.3 示例代碼
#menu {
height: 40px; width: 350px;
border: 2px solid black;
}
#menu li {
float: left;
width: 100px; height: 20px;
text-align: center;
list-style-type: none;
background-color: #99cccc;
margin: 5px; padding-top: 10px;
}
a { text-decoration: none; }
6.float在網頁中常見應用5:鮮花布局
6.1 效果
6.2 示例代碼
#show div div{
float:left;
margin:10px ; border:1px solid green;
text-align:center; font-size:13px;
}
#show{ width:450px; border:1px solid blue; }
#center{
margin: 0 auto;
overflow:auto;/*防止浮動塌陷*/
width: 390px; border:1px solid red;
}
價格：36.00
價格：36.00
價格：36.00
價格：36.00
價格：36.00
價格：36.00
7. 浮動使用的技巧擴展（有能力則學習）
7.1. 左右浮動。
7.1.1. 需求。
7.1.2. 方案一。
7.1.3. 方案二。
7.1.4. 方案三。
7.1.5. 方案四。
7.2. 左中右或者多列的浮動。
7.2.1.方案一。絕對定位法(需要下一個知識點)
7.2.1.1. 概述
絕對定位法：左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應佈局。
7.2.1.2. 核心代碼示例
#left{
width: 180px;
height: 100%;
background: blue;
position: absolute;
left: 0px;
top: 0px; }
#middle{
background: red;
margin: 0 200px;
height: 100%; }
#right{
width: 180px;
background: blue;
position: absolute;
right: 0px;
top: 0px;
height: 100%; }
div的排版方式
7.2.1.3. 優劣
此方法的優點在於：理解容易，上手簡單，受內部元素影響而破壞佈局的概率低，就是比較經得起折騰。
缺點在於：如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。
7.2.2.方案二。自身浮動法
7.2.2.1. 概述
自身浮動法：左欄左浮動，右欄右浮動，中間欄放最後。
7.2.2.2. 核心代碼示例
#left{ width: 180px; height: 100%; background: blue; float: left; } #middle{ background: red; margin: 0 200px; height: 100%; } #right{ width: 180px; height: 100%; background: blue; float: right; }
div的排版方式
7.2.2.3. 優劣
這種方式需要注意三個div的順序，左右兩欄的順序不分先後，但是中間一欄必須放在最後。
此方法的優點是：代碼足夠簡潔與高效
缺點是：中間主體存在剋星，clear:both屬性。如果要使用此方法，需避免明顯的clear樣式。
7.2.3.方案三。margin負值法
7.2.3.1. 概述
margin負值法：左右兩欄均左浮動，左右兩欄採用負的margin值。中間欄被寬度為100%的浮動元素包起來。
7.2.3.2. 核心代碼示例
#middle{ width: 100%; float: left; }
#main{ background: red; margin: 0 200px; height: 100%; }#left{ width: 200px; float: left; margin-left: -100%; height: 100%; background:blue; }#right{ width: 200px; float: left; margin-left: -200px; height: 100%; background:blue; }
div的排版
7.2.3.3. 優劣
此方法的優點在於：三欄相互關聯，可謂真正意義上的自適應，有一定的抗性——佈局不易受內部影響。
缺點在於：相對比較難理解些，上手不容易，代碼相對複雜。出現百分比寬度，過多的負值定位，如果出現佈局的bug，排查不易。
7.2.4.方案四。分組法。
7.2.4.1. 概述
分組法，先把三個欄分成兩個組，當做兩個標籤來處理。先處理兩個，然後再處理組內的另外兩個。
7.2.3.2. 核心代碼示例
div的排版
或者 div的排版
7.2.4.3. 優劣
清晰直觀簡單。
8. 浮動的遺憾
8.1. 卡住。
（1）現象：如下圖
（2）原理：浮動框高度不同時，換行的浮動元素只沿著自己前一個元素的底部向左或向右移動。
（3）解決辦法：把浮動元素的高度都設置成相同的值。
8.2. 遮蓋。
（1）現象：元素浮動後，同一個容器內的後續塊狀元素被浮動元素遮蓋。
（2）原理：浮動元素脫離文檔流以後，原後續元素在文檔流中按順序依次排放，造成被浮動遮蓋。即當一個單位的老一上調後，位置出現空缺，老二上位，老領導的光環會照耀新領導。
（3）解決方案：（a）都浮動起來；（b）在框1後清除浮動對後續元素的影響，或者在框2開始清除浮動的影響。
8.3. 塌陷
（1）現象：父容器沒有設置高度、也沒有防塌陷時，如果父框內的元素都浮動後，父框的高度為0。
（2）原理：父容器內的子元素都浮動後，計算父容器高度時，因文檔流層的無內容，高度自然計算成0。
（3）解決辦法：（a）父容器指定高度；（b）父容器使用 overflower:hidden;有浮動時，一般都添加本樣式。
8.4 對後續行內元素的環繞、錯位影響
（1）現象1：元素浮動後，主要針對同一個父容器內的後續全體文字，都帶來環繞效果。
（1.1）原理：浮動的目的就是要實現環繞效果。
（1.2）解決辦法： 在上述右圖的p1之後、或者p2之前、或者p1與p2之間，實施清除浮動。
（2）現象2：元素浮動，部分瀏覽器，不知道在什麼時候，對後續其它父容器內的行內元素造成錯誤影響。在火狐中查看元素元素的 margin和padding都正常，就是與其它元素之間留出若干個像素的距離。
（2.1）原理：也許是BUG吧；
（2.2）解決辦法：浮動完成後，實施清除浮動。
8.5 附清除浮動的通用方法
(1) 浮動完成後，添加一個無內容的
(2) 在後續不需浮動的標籤上添加一個
(3) 在後續不需浮動的標籤上添加一個
(4)在浮動完成後，利用偽對象實施清除樣式，特別常見。
閱讀更多 HelloTeacher陳 的文章
