浮動的三個特點很重要。
1. 脫離文件流。
2. 向左/向右浮動直到遇到父元素或者別的浮動元素。
3. 浮動會導致父元素高度坍塌。
// 現代瀏覽器clearfix方案，不支援ie6/7bfc全稱是塊狀格式化上下文，它是按照塊級盒子布局的。我們了解他的特徵、觸發方式、常見使用場景這些就夠了。.clearfix:after
// 全瀏覽器通用的clearfix方案
// 引入了zoom以支援ie6/7
.clearfix:after
.clearfix
// 全瀏覽器通用的clearfix方案【推薦】
// 引入了zoom以支援ie6/7
// 同時加入:before以解決現代瀏覽器上邊距摺疊的問題
.clearfix:before,
.clearfix:after
.clearfix:after
.clearfix
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。但是這樣元素陰影或下拉列表會被截斷，比較侷限。
overflow: hidden;
}解決父元素高度坍塌的方式就是清除浮動，常規的方法是clear清除浮動和bfc清除浮動，推薦clearfix的方式。一定要弄清楚clear清除浮動的底層原理以及clearfix的那幾行**的具體作用。
文字環繞效果
這個不用說了，浮動本來就是為文字環繞效果而生，這是最基本的
文字環繞效果
頁面布局
浮動可以實現常規的多列布局，但個人推薦使用inline-block。
浮動更適合實現自適應多列布局，比如左側固定寬度，右側根據父元素寬度自適應。
頁面布局
多個元素內聯排列
如果前文提到的，浮動可以實現類似inline-block的排列，比如選單多個元素內聯排列。但個人推薦使用inline-block。
多個元素內聯排列
clear清除浮動標籤
1 清除浮動clear clear right 清除右浮動造成的影響 clear left 清除左浮動造成的影響 clear both 清除兩邊浮動造成的影響 注意 在浮動後面的盒子上設定清除樣式 即那個受影響就在誰上面設定 2 overflow 超出部分如何處理 overflow hidden 超...
CSS 清除浮動Clear
還記得第二課我們做的例子的效果麼？最後效果是，紅色方塊和藍色方塊都處於一行，我們使用 float left 打擊了塊狀元素的 霸道 即塊狀元素不允許其他元素和它處於同一行。我們將紅色方塊的css 中加入了 float left 後，紅色方塊終於允許藍色方塊和它處於同一行。如圖 我們換一種方法表達上面...
css之clear 清除浮動
哈哈哈哈哈哈哈，我懂了原理啦 clear清除的是浮動的高度 就是跑到位置 而不影響浮動的方向.原理如下 clear清除的是元素本身，但不會影響方向。通俗點說就是clear清除的是浮動產生的文件流。舉個例子，就是有2個div,當第二個div產生浮動時，第二個div會脫離第二行，到達第一行。當你清除它的...