清除浮動
1.普通流（標準流）
2.浮動
讓盒子從普通流中浮起來，主要作用是讓多個塊級盒子在一行內顯示。
3.定位
將某個盒子定位在瀏覽器的某一固定位置。
float的語法：選擇器
例1：兩個普通流塊級元素各佔一行從上到下順序排列
當給乙個元素設定浮動之後，它就會「飄起來」
例2：將三個塊級元素設定display屬性轉換為行內塊，會有空白縫隙。
轉換為浮動元素後，緊密貼合，無空白縫隙。
注意：由於浮動元素會使它之後的標準流元素到原先浮動元素的位置進行補位，為了避免浮動元素對其他標準流元素的影響，通常給浮動元素新增乙個標準流的父元素。
"en">"#">首頁
"#">首頁
"#">首頁
"#">首頁
"#">首頁
"#">首頁
1.浮動元素不會超過父元素的內邊距以及邊框，子元素的浮動是參照父元素對齊的。
2.浮動元素只會影響當前的或是後面的標準流元素，不會影響前面的。
如果乙個盒子裡面有多個子盒子，如果其中乙個盒子浮動了，其他兄弟也應該浮動。防止引起問題。
父盒子沒有設定高度的時候，如果子盒子全是浮動的，那麼因為浮動盒子不會實際占有標準流的位置，會造成父盒子沒有高度，這樣就會影響下面的標準流盒子的位置。
如圖：
"father">
所以要清除浮動，即清除浮動帶來的影響。清除浮動之後， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了。
語法選擇器
清除浮動的方法：
1.額外標籤法
在浮動元素的末尾新增乙個空標籤，如：
"father">
"son1">
"son2">
"clear: both;">
"next">
2.為父元素新增overflow屬性
overflow: hidden || scroll || auto;後兩種不怎麼會用到
.father
.clearfix:after
.clearfix
用上述四種方法清除浮動後，可以看到
浮動詳細解說 CSS 04
一 浮動 1.1css布局的三種機制 1 普通流 標準流 2 浮動 讓盒子從普通流中浮起來，主要作用讓多個塊級盒子一行顯示 3 定位 讓盒子定在瀏覽器的某乙個位置 css離不開定位，特別是後面的js特效 1.2為什麼需要浮動 如何讓多個盒子水平排列成一行？如何讓盒子左右對齊？行內塊元素有缺陷 1 它...
前端學習之路css 04 基礎知識
分組選擇器 在樣式中，我們可能有很多元素擁有同樣的樣式，我們可以使用分組選擇器將它們一次性定義出來。每個選擇器用逗號分隔。巢狀選擇器 它適用於選擇器內部的選擇器樣式。css中允許我們控制元素的寬高，屬性大致包括以下 此屬性就是控制元素是否顯示的。隱藏元素有兩種表示方式 visibility hidd...
前端學習之CSS（04）布局
盒子模型 頁面元素的大小 邊框與其他元素的距離 定位機制 文件流浮動定位 層定位 盒子模型組成 charset utf 8 type text css box style head box 內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容 div body html overflow屬...