1、浮動的定義
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。
css 的 float（浮動）使元素脫離文件流，按照指定的方向（左或右發生移動），直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
說到脫離文件流要說一下什麼是文件流，文件流是是文件中可顯示物件在排列時所占用的位置/空間，而脫離文件流就是在頁面中不佔位置了。
【例項1-1】
2、浮動的原理
（1）浮動以後使元素脫離了文件流（在頁面中不佔據位置）
（2）浮動是碰到父元素的邊框或者浮動元素的邊框就會停止
（3）浮動不會重疊
（4）浮動只有左右浮動，沒有上下浮動
（5）浮動以後塊級元素在同一行顯示，行內元素可以設定寬高
（6）元素沒有設定寬度和高度時，寬度為內容撐開
請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從檢視中消失。
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：
3、浮動的語法
4、清除浮動的影響
當元素設定float浮動後，該元素就會脫離文件流並向左/向右浮動，直到碰到父元素或者另乙個浮動元素，浮動元素會造成父元素高度塌陷。
（1）設定父布局的高度
設定父標籤合適的高度，前提必須確定子布局的高度，來計算父布局的合適高度，包裹住子布局。
（2）受影響的元素加clear屬性
clear:left | right | both;
（3）overflow清除浮動
這種情況下，父布局不能設定高度。
父級標籤的樣式裡面加: overflow:hidden;
（4）空div法
在最後乙個浮動的盒子的後面，新新增乙個標籤。然後設定clear清除浮動。
這種情況下，父布局不能設定高度。
優點： 通俗好理解。
缺點： 增加了太多的標籤。
.clear
為父標籤新增偽類after,設定空的內容，並且使用clear:both;
這種情況下，父布局不能設定高度。
優點： 無需新增多餘的標籤，並且可以全域性呼叫。
.box::after
浮動元素撐起父級元素
浮動會使元素脫離文件流，如果不設定父級高度，父級將失去高度，影響頁面布局。這裡總結了一些常用的方法，是父級 有高度 1.設定父級高度 設定乙個合適的高度，這種方法比較適用於元素高度固定的場景。2.設定父級元素 overflow hidden 這種方法比較簡單，但要確保父級元素沒有溢位樣式。3.設定父...
解決子元素設定浮動影響父元素問題
例 lang zh cn charset utf 8 body div0 div2,div3 style head class div0 class div2 div class div3 div div body html 此時父元素div0無法包含子元素，解決辦法 1.給父元素設定overflo...
CSS子元素浮動導致父元素高度塌陷問題
根據w3c標準，在頁面中元素都有乙個隱含的屬性叫做 block formatting context，簡稱 bfc，該屬性可以設定開啟或者關閉，預設是關閉的。當開啟元素的bfc以後，元素會具有以下特性 1.父元素的垂直外邊距不會和子元素重疊 2.開啟 bfc 的元素不會被浮動元素覆蓋 3.開啟 bf...