css布局的三種機制
分別是普通流（標準流）、浮動和定位
1.標準流
塊級元素會獨佔一行從上向下排列。
行內元素會按照順序排列，從左往右排碰到父級元素則會自動換行
2.浮動
讓盒子從普通流中浮起來，主要讓多個塊級盒子一行顯示
3.定位
將盒子定在瀏覽器的某個位置
浮動什麼是浮動？(float)
元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，根據指定移動位置。
作用：1讓多個盒子(div)水平排列成一行，功能強大使浮動稱為布局的重要手段
2.可以實現盒子的左右對齊
3.浮動可以控制，實現文字環繞效果
語法：選擇器
none 元素不可浮動（預設）
left 元素向左浮動
right 元素向右浮動
特點：float屬性會讓盒子漂浮在標準流上，可以蓋住標準流的元素
float浮動把自己原來的位置給了下面標準流的盒子，不佔原來位置
float浮動會改變元素的display屬性，任何元素都可以浮動，浮動的元素會生成乙個塊級框。
float擴充套件
浮動元素與父元素的關係
子盒子和浮動參照父盒子對齊
不會和父盒子的邊框重疊，也不會超過父盒子的內邊距
浮動元素與兄弟盒子的關係
在乙個父級盒子中，如果前乙個是兄弟盒子是浮動的，那麼會當前盒子與前乙個盒子的頂部對齊，如果是普通流，那麼當前盒子會顯示在前乙個兄弟盒子下方
浮動只會影響當前或者是後面的標準流盒子，不會影響前面的標準流。
為什麼要清楚浮動呢
父級盒子很多情況下，不方便給予高度，但是盒子浮動不佔位置，父級盒子的高度也就成了0，影響了下面的標準流盒子。準確地說不是清楚浮動而是清楚浮動對後面的產生的影響
清楚浮動的方法
clear屬性用於清楚浮動
語法：選擇器
left： 不允許左側有浮動元素
right：不允許右側有浮動元素
both：同時清楚左右兩側的浮動的影響
1.額外標籤法
在浮動元素的尾部新增乙個空的標籤。
如
>
style
="clear
: both;
">
div>
div>
缺：新增許多毫無意義的標籤，結構化比較差勁
2.父級新增overflow屬性
對父級css選擇器加overflow:hidden樣式，可以清除父級內使用float產生浮動。優點是可以很少css**即可解決浮動產生。
.div
.div-left,.div-right
.div-left
.div-right
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏。
3.使用after偽元素清楚浮動
.clearfix:after
.clearfix /* ie6、7 專有 */
缺點： 由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。
4.使用雙偽元素清除
.clearfix:before,.clearfix:after
.clearfix:after
.clearfix
缺點：由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。
float浮動相關知識點筆記
float left right none inherit 塊在一排顯示 內聯支援寬高 預設內容撐開寬度 脫離文件流 提公升層級半層 加高問題 擴充套件性不好 父級浮動 問題 頁面中所有元素都加浮動，margin左右自動失效 inline block 清除浮動方法 問題 margin左右auto失效...
前端知識點之樣式中的元素浮動
浮動 float 定義 使元素脫離文件流，按照指定的方向發生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來 浮動元素是同時處於常規流內和常規流的元素，其中塊級元素認為浮動元素不存在，而浮動元素會影響行內元素的布局 因此浮動元素通過影響行內元素的布局來間接影響包含塊的布局 常規流 頁面從左往右，從上...
html定位屬性和浮動元素的知識點
static 靜態位置屬性 相對定位 relative 絕對定位 abosult 1 浮動後 元素本身脫離文件流，原來的位置被其他元素所佔據 2 浮動後 在同乙個父元素中，目標元素回佔據乙個浮動後位置。3 注意 浮動只能是 子元素在容器中進行位置移動。如果父容器剩餘寬度不能容納兩乙個子元素，那麼久換...