1.浮動使元素脫離文件流。
2.浮動的元素可以設定寬高，在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。
3.如果沒有給浮動元素指定高度，那麼它會以內容的高度為自己的高度，並且盡可能的窄。
4.浮動的元素因為脫離了文件流，所以不能把父元素撐出高度。
5.浮動框脫離了文件流，所以文件裡的其他普通的塊框會表現得像浮動框不存在一樣。
6.浮動框可以左移右移，直到它的外邊框碰到包裹它的框的邊緣或是另乙個浮動框為止。
7.浮動多用於與文字的環繞處理。給含有的div設定浮動，會浮動，而段落不浮動，效果是文字環繞。
先看一張圖
html內容：
class="outer">
class="div1">111
div>
class="div2">222
div>
class="div3">333
div>
div>
樣式表：
.outer
.div1
.div2
.div3
可行。但是在網頁設計中，我們一般都不會直接給父元素設定高度，而是採用由子元素撐開高度的方式來，所以有侷限性。
2.給父元素新增 overflow:hidden|auto 屬性。
.outer
什麼意思呢，請看
.outer
.div1
.div2
.div3
.null
class="outer">
class="div1">111
div>
class="div2">222
div>
class="div3">333
div>
class="null">div>
div>
因為新增的 null 塊裡面並沒有內容，也沒有寬高，所以不會對頁面元素產生其他影響。
效果當然是去除了浮動。
如果對：after有疑惑的請戳學習筆記—css中偽類與偽元素，在這篇文章中，我簡單的總結了下偽類偽元素的區別用法。
回到本文：
我們給父元素.outer新增:after偽類，設定樣式
.outer
.div1
.div2
.div3
.outer
:after
class="outer">
class="div1">111
div>
class="div2">222
div>
class="div3">333
div>
div>
這個的原理其實和上面的方法三是同理的，但是利用了:after的特性，直接在父元素後面新增乙個塊，內容為空，樣式隱藏，再對其設定clear:both,達到清除浮動的樣式。
這種方法在網上頗為流行，因為不會在dom結構中新增新元素相比方式三更為優化。
清除浮動的方式很多，選擇哪個也因人而異，我自己而言，更偏好最後一種，因為不用新增新的元素內容，並且我們又鞏固了一種:after的用法了呀
css浮動清除筆記
1.在文件流中內容的高度可以撐起父元素的高度 2.在浮動流中浮動的元素是不可以撐起文件流父元素的高度 如果父元素也是浮動的就可以 可以看到將p元素設定浮動之後，並沒有撐起父元素div 我是文字1 我是文字1 我是文字1 我是文字2 我是文字2 我是文字2 根據浮動排列的規則和浮動不能撐起父元素的高度...
css學習筆記之浮動清除
說到浮動，不得不說一下bfc block formatting context 翻譯為 塊級格式化上下文 關於bfc的原理，我參考了此篇文章，bfc參考資料 大家有需要可以去看看。清除浮動 子層 底部 這種方法雖直接讓底部的div擠到下方，並沒有真正的清除浮動，但可以達到清除浮動的效果。清除浮動 子...
前端學習筆記 CSS 清除浮動
我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現，但是，你不能說浮動不好 由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。準確地說，並不是清除浮動，而是清除浮動後造成的影響 如果浮動一...