網頁布局的核心——就是用 css 來擺放盒子。
css 提供了 3 種機制來設定盒子的擺放位置，分別是普通流（標準流）、浮動和定位，其中：
浮動
思考題：
我們首先要思考以下2個布局中最常見的問題？
如何讓多個盒子(div)水平排列成一行？
如何實現盒子的左右對齊？
雖然可以使用行內塊（inline-block） 但是他卻有自己的缺陷：
什麼是浮動(float)
概念：元素的浮動是指設定了浮動屬性的元素會
作用
語法
選擇器
*通過乙個浮動口訣 float ----- 浮 漏 特 可以更好的幫助我們理解
浮動(float)小結
我們使用浮動的核心目的——讓多個塊級盒子在同一行顯示。 因為這是我們最常見的一種布局方式
float —— 浮漏特
為什麼要清除浮動
總結：
1.額外標籤法(隔牆法)
是w3c推薦的做法是通過在浮動元素末尾新增乙個空的標籤例如
，或則其他標籤br等亦可。
可以給父級新增： overflow為 hidden| auto| scroll 都可以實現。缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。
3.使用after偽元素清除浮動
:after 方式為空元素額外標籤法的公升級版，好處是不用單獨加標籤了
使用方法：
.clearfix:after
.clearfix /* ie6、7 專有 */
使用方法：
.clearfix:before,.clearfix:after
.clearfix:after
.clearfix
子盒子浮動了
影響下面布局了，我們就應該清除浮動了。
CSS浮動以及清除浮動
傳統網頁布局的三種方式 本質 用css擺放盒子。實際開發中，乙個頁面基本都包含了這三種布局方式 1 普通流 標準流 文件流 最基本的布局方式 標籤按照規定好預設方式排列 浮動 float屬性用於建立浮動框，將其移動到一邊知道左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。要想塊元素水平排列如果轉換成行...
浮動以及清除浮動 BFC CSS
float屬性指定乙個元素應沿其容器的左側或者右側放置，允許文字和內聯元素環繞它。浮動定位常用於布局中。浮動的特點 脫標 脫離標準流 貼邊 會貼向父容器或其他浮動的側邊 字圍 文字和內聯元素會環繞浮動元素 即float的屬性值不為none的值 收縮 塊級元素不再沾滿一整行，而是收縮至元素本身的寬度 ...
CSS的浮動以及清除浮動
給元素新增了float屬性 float left,float right 可以讓元素進行橫向排列 做文字圍繞效果 因為文件流元素會忽視浮動元素的存在，但是文件流元素的文字卻不會。新增了float屬性後，該元素會脫離正常的文件流，所以會覆蓋其他的元素，父元素由於沒有被撐開，造成了高度塌陷。所以清除浮動...