網(wǎng)頁布局的核心——就是用 CSS 來擺放盒子旋炒。

CSS 提供了 3 種機制來設(shè)置盒子的擺放位置尤泽，分別是普通流（標(biāo)準(zhǔn)流）、浮動和定位巾钉，其中：

1. 普通流（標(biāo)準(zhǔn)流）
   • 塊級元素會獨占一行翘狱，從上向下順序排列；
     • 常用元素：div砰苍、hr潦匈、p、h1~h6师骗、ul历等、ol、dl辟癌、form寒屯、table
   • 行內(nèi)元素會按照順序，從左到右順序排列黍少，碰到父元素邊緣則自動換行寡夹；
     • 常用元素：span、a厂置、i菩掏、em等
2. 浮動
   • 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示。
3. 定位
   • 將盒子定在瀏覽器的某一個位置——CSS 離不開定位昵济，特別是后面的 js 特效智绸。

什么是浮動(float)

概念：元素的浮動是指設(shè)置了浮動屬性的元素會

1. 脫離標(biāo)準(zhǔn)普通流的控制
2. 移動到指定位置。

作用

1. 讓多個盒子(div)水平排列成一行访忿，使得浮動成為布局的重要手段瞧栗。
2. 可以實現(xiàn)盒子的左右對齊等等..
3. 浮動最早是用來控制圖片，實現(xiàn)文字環(huán)繞圖片的效果海铆。

• float 屬性會讓盒子漂浮在標(biāo)準(zhǔn)流的上面迹恐，所以第二個標(biāo)準(zhǔn)流的盒子跑到浮動盒子的底下了。

浮動——漏_漏漏~ 浮動的盒子卧斟，把自己原來的位置漏給下面標(biāo)準(zhǔn)流的盒子殴边，就是不占有原來位置憎茂，是脫離標(biāo)準(zhǔn)流的，我們俗稱 “脫標(biāo)”锤岸。

浮動——特性 float屬性會改變元素display屬性竖幔。

任何元素都可以浮動。浮動元素會生成一個塊級框能耻，而不論它本身是何種元素赏枚。 生成的塊級框和我們前面的行內(nèi)塊極其相似亡驰。

轉(zhuǎn)換為行內(nèi)塊元素晓猛，可以水平顯示，不過 div 之間有間隙凡辱，不方便處理

設(shè)置浮動屬性戒职，可以讓 div 水平排列，并且沒有間隙

注意： 浮動的元素互相貼靠一起的透乾，但是如果父級寬度裝不下這些浮動的盒子洪燥， 多出的盒子會另起一行對齊

1.4 浮動(float)小結(jié)

我們使用浮動的核心目的——讓多個塊級盒子在同一行顯示。 因為這是我們最常見的一種布局方式

float —— 浮漏特

浮動(float)的應(yīng)用（重要）

浮動和標(biāo)準(zhǔn)流的父盒子搭配

我們知道磷瘤，浮動是脫標(biāo)的芒篷，會影響下面的標(biāo)準(zhǔn)流元素，此時采缚，我們需要給浮動的元素添加一個標(biāo)準(zhǔn)流的父親针炉，這樣，最大化的減小了對其他標(biāo)準(zhǔn)流的影響扳抽。

浮動(float)的擴展

1). 浮動元素與父盒子的關(guān)系

• 子盒子的浮動參照父盒子對齊
• 不會與父盒子的邊框重疊篡帕，也不會超過父盒子的內(nèi)邊距

2). 浮動元素與兄弟盒子的關(guān)系

在一個父級盒子中，如果前一個兄弟盒子是：

• 浮動的贸呢，那么當(dāng)前盒子會與前一個盒子的頂部對齊镰烧；
• 普通流的，那么當(dāng)前盒子會顯示在前一個兄弟盒子的下方贮尉。

浮動只會影響當(dāng)前的或者是后面的標(biāo)準(zhǔn)流盒子拌滋，不會影響前面的標(biāo)準(zhǔn)流。

建議

如果一個盒子里面有多個子盒子猜谚，如果其中一個盒子浮動了败砂，其他兄弟也應(yīng)該浮動赌渣。防止引起問題

清除浮動

為什么要清除浮動

因為父級盒子很多情況下，不方便給高度昌犹，但是子盒子浮動就不占有位置坚芜，最后父級盒子高度為0，就影響了下面的標(biāo)準(zhǔn)流盒子斜姥。

• 總結(jié)：
  • 由于浮動元素不再占用原文檔流的位置鸿竖，所以它會對后面的元素排版產(chǎn)生影響
  • 準(zhǔn)確地說，并不是清除浮動铸敏，而是清除浮動后造成的影響

清除浮動本質(zhì)

? 清除浮動主要為了解決父級元素因為子級浮動引起內(nèi)部高度為0 的問題缚忧。清除浮動之后， 父級就會根據(jù)浮動的子盒子自動檢測高度杈笔。父級有了高度闪水，就不會影響下面的標(biāo)準(zhǔn)流了

清除浮動的方法

在CSS中，clear屬性用于清除浮動蒙具。

• 語法：

選擇器{clear:屬性值;}   clear 清除  

但是我們實際工作中球榆， 幾乎只用 clear: both;

1).額外標(biāo)簽法(隔墻法)

是W3C推薦的做法是通過在浮動元素末尾添加一個空的標(biāo)簽例如 <div style=”clear:both”></div>，或則其他標(biāo)簽br等亦可禁筏。

• 優(yōu)點： 通俗易懂持钉，書寫方便
• 缺點： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差篱昔。

2).父級添加overflow屬性方法

可以給父級添加： overflow為 hidden| auto| scroll  都可以實現(xiàn)每强。

優(yōu)點： 代碼簡潔

缺點： 內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素旱爆。

3).使用after偽元素清除浮動

:after 方式為空元素額外標(biāo)簽法的升級版舀射，好處是不用單獨加標(biāo)簽了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 專有 */

• 優(yōu)點： 符合閉合浮動思想 結(jié)構(gòu)語義化正確
• 缺點： 由于IE6-7不支持:after怀伦，使用 zoom:1觸發(fā) hasLayout脆烟。
• 代表網(wǎng)站： 百度、淘寶網(wǎng)房待、網(wǎng)易等

4).使用雙偽元素清除浮動

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

• 優(yōu)點： 代碼更簡潔

• 缺點： 由于IE6-7不支持:after邢羔，使用 zoom:1觸發(fā) hasLayout。

• 代表網(wǎng)站： 小米桑孩、騰訊等

清除浮動總結(jié)

1. 父級沒高度
2. 子盒子浮動了
3. 影響下面布局了拜鹤，我們就應(yīng)該清除浮動了。