浮動核心就一句話：浮動元素會脫離文件流並向左/向右浮動，直到碰到父元素或者另乙個浮動元素。請默念3次！
浮動最初設計的目的並沒那麼多事兒，就只是用來實現文字環繞效果而已，如下所示：
但是早期的前端開發者發現：浮動的元素可以設定寬高並且可以內聯排列，是介於inline和block之間的乙個神奇的存在，在inline-block出來之前，浮動大行其道。直到inline-block出來後，浮動也有它自己獨特的使用場景。
浮動的特徵就體現在前文的那句話中，別忘了默念三次！此外，浮動帶來的負效果也算是它的特徵之一。
浮動會脫離文件
脫離文件，也就是說浮動不會影響普通元素的布局
從上圖可以看出，預設三個設定了寬高的block元素，本來會格仔獨佔一行；如果框1設定了向左/向右浮動，他會忽略框2和框3，直到碰到父元素；同時也存在蓋住普通元素的風險。
浮動可以內聯排列
浮動會向左/向右浮動，直到碰到另乙個浮動元素為止，這是浮動可以內聯排列的特徵。也就是說，浮動可以設定寬高，並且能夠一行多個，是介於block和inline之間的存在。
從上圖可以看出，對多個元素設定浮動，可以實現類似inline-block的效果；但是如果每個元素的高度不一致，會出現「卡住」的情況。
浮動會導致父元素高度坍塌
浮動會脫離文件流，這個問題對整個頁面布局有很大的影響。
// css
border: 5px solid red;
} float: left;
width: 100px;
height: 100px;
margin: 20px;
background-color: green;
}// html
class="box">
div>
class="box">
div>
class="box">
div>
div>結果如下，浮動元素脫離了文件流，並不佔據文件流的位置，自然父元素也就不能被撐開，所以沒了高度。
那怎麼辦呢？那就需要我們清除浮動，來解決高度坍塌問題！
清除浮動主要有兩種方式，分別是clear清除浮動和bfc清除浮動，其他的你也不用去了解了。
clear如何清除浮動？
clear屬性不允許被清除浮動的元素的左邊/右邊挨著浮動元素，底層原理是在被清除浮動的元素上邊或者下邊新增足夠的清除空間。這句話，請默念5次！
要注意了，我們是通過在別的元素上清除浮動來實現撐開高度的， 而不是在浮動元素上。
還是接著上面的例子，我們簡單修改一下html**，如下
高度坍塌的問題解決了，至此，好像浮動我們可以隨便玩了，真棒！
不要在浮動元素上清除浮動
但是有人問到，如果我們給第三個元素加上clear:both，結果會怎樣？
誒？給第三個元素加上clear:both之後，第三個元素的左右都沒有挨著浮動元素，但是為什麼高度還是坍塌了呢？機智的你可能發現了，由於第三個元素是浮動元素，脫離了文件流，就算給第三個元素上下加了清除空間，也是沒有任何意義的。
clear清除浮動最佳實踐
那麼clear清除浮動的最佳實踐是什麼呢？請看如下**：
// 現代瀏覽器clearfix方案，不支援ie6/7
.clearfix
:after
// 全瀏覽器通用的clearfix方案
// 引入了zoom以支援ie6/7
.clearfix
:after
.clearfix
// 全瀏覽器通用的clearfix方案【推薦】
// 引入了zoom以支援ie6/7
// 同時加入:before以解決現代瀏覽器上邊距摺疊的問題
一句話，強烈推薦clearfix的方式清除浮動！
bfc全稱是塊狀格式化上下文，它是按照塊級盒子布局的。我們了解他的特徵、觸發方式、常見使用場景這些就夠了。
bfc的主要特徵
✦ bfc容器是乙個隔離的容器，和其他元素互不干擾；所以我們可以用觸發兩個元素的bfc來解決垂直邊距摺疊問題。
✦ bfc可以包含浮動；通常用來解決浮動父元素高度坍塌的問題。
其中，bfc清除浮動就是用的「包含浮動」這條特性。
那麼，怎樣才能觸發bfc呢？
bfc的觸發方式
我們可以給父元素新增以下屬性來觸發bfc：
✦ float 為 left | right
✦ overflow 為 hidden | auto | scorll
✦ display 為 table-cell | table-caption | inline-block | flex | inline-flex
✦ position 為 absolute | fixed
所以我們可以給父元素設定overflow:auto來簡單的實現bfc清除浮動，但是為了相容ie最好用overflow:hidden。但是這樣元素陰影或下拉列表會被截斷，比較侷限。
文字環繞效果
這個不用說了，浮動本來就是為文字環繞效果而生，這是最基本的
頁面布局
浮動可以實現常規的多列布局，但個人推薦使用inline-block。
浮動更適合實現自適應多列布局，比如左側固定寬度，右側根據父元素寬度自適應。
多個元素內聯排列
如果前文提到的，浮動可以實現類似inline-block的排列，比如選單多個元素內聯排列。但個人推薦使用inline-block。
本來只是想簡單說說浮動的背景、浮動的問題，浮動的解決方案，但真整理起來的時候，又發現很多知識點需要擴充套件，很多東西需要掰扯，一文難以言盡，所以只挑一些我覺得比較主流比較重要的知識寫出來，如果有興趣可以自行展開。
✦ 浮動最初設計只是用來實現文字環繞排版的。
✦ 浮動的三個特點很重要。
1. 脫離文件流。
2. 向左/向右浮動直到遇到父元素或者別的浮動元素。
3. 浮動會導致父元素高度坍塌。
✦ 解決父元素高度坍塌的方式就是清除浮動，常規的方法是clear清除浮動和bfc清除浮動，推薦clearfix的方式。一定要弄清楚clear清除浮動的底層原理以及clearfix的那幾行**的具體作用。
✦ bfc有自己的特徵，也有觸發bfc的方式，這兒就不展開太多了。
✦ ie6/7不支援bfc，也不支援:after，所以ie6/7清除浮動要靠觸發haslayout，了解下就行，畢竟ie6/7已經是歷史的產物了。
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...