網頁布局的本質——用 css 來擺放盒子。 把盒子擺放到相應位置.
css 提供了三種傳統布局方式(簡單說,就是盒子如何進行排列順序)：
所謂的標準流: 就是標籤按照規定好預設方式排列.
塊級元素會獨佔一行，從上向下順序排列。
行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。
以上都是標準流布局，我們前面學習的就是標準流，標準流是最基本的布局方式。
這三種布局方式都是用來擺放盒子的，盒子擺放到合適位置，布局自然就完成了。
實際開發中，乙個頁面基本都包含了這三種布局方式
提問：我們用標準流能很方便的實現如下效果嗎？
如何讓多個塊級盒子(div)水平排列成一行？
比較難，雖然轉換為行內塊元素可以實現一行顯示，但是他們之間會有大的空白縫隙，很難控制。
提問：我們用標準流能很方便的實現如下效果嗎？
如何實現兩個盒子的左右對齊？
總結： 有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動完成布局。 因為浮動可以改變元素標籤預設的排列方式.
浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。
網頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。
float 屬性用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。
語法：
加了浮動之後的元素,會具有很多特性,需要我們掌握的.
浮動元素會脫離標準流(脫標)
浮動的元素會一行內顯示並且元素頂部對齊
浮動的元素會具有行內塊元素的特性.
設定了浮動（float）的元素最重要特性：
脫離標準普通流的控制（浮） 移動到指定位置（動）, （俗稱脫標） 浮動的盒子不保留原有位置
如果多個盒子都設定了浮動，則它們會按照屬性值一行內顯示並且頂端對齊排列。
注意： 浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊。
浮動元素會具有行內塊元素特性。
任何元素都可以浮動。不管原先是什麼模式的元素，新增浮動之後具有行內塊元素相似的特性。
為了約束浮動元素位置, 我們網頁布局一般採取的策略是:
先用標準流的父元素排列上下位置, 之後內部子元素採取浮動排列左右位置. 符合網頁布局第一準側.
由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最後父級盒子高度為 0 時，就會影響下面的標準流盒子。
語法：
我們實際工作中， 幾乎只用 clear: both;
清除浮動的策略是: 閉合浮動.
額外標籤法也稱為隔牆法，是 w3c 推薦的做法。
額外標籤法會在浮動元素末尾新增乙個空的標籤。例如
，或者其他標籤
（如等）。
注意： 要求這個新的空標籤必須是塊級元素。
可以給父級新增 overflow 屬性，將其屬性值設定為 hidden、 auto 或 scroll 。
子不教,父之過,注意是給父元素新增**
:after 方式是額外標籤法的公升級版。也是給父元素新增
.clearfix:after
.clearfix
.clearfix:before,.clearfix:after
.clearfix:after
.clearfix
① 父級沒高度。
② 子盒子浮動了。
③ 影響下面布局了，我們就應該清除浮動了。
css浮動和清除浮動
css樣式的float浮動屬性，用於設定標籤物件 如 標籤盒子 標籤 標籤 標籤等html標籤 的浮動布局，浮動也就是我們所說標籤物件浮動居左靠左 float left 和浮動居右靠右 float right 一般情況是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣cs...
CSS浮動和清除浮動
包裹性指的是元素尺寸剛好容納內容,表現得就像diaplay inline block一樣 具有包裹性的其他屬性 display inline block position absolute fixed sticky overflow hidden scroll會使父元素高度塌陷 為了實現文字環繞效果...
CSS浮動和清除浮動
一 浮動 float left，元素脫離文件流，向左移動，直到碰到包含框或者另乙個浮動元素的左側 或float right，元素脫離文件流，向右移動，直到碰到包含框或者另乙個浮動元素的右側 二 清除浮動 clear left right both 正確的解釋應該是 對於元素a設定屬性clear le...