從另外一個角度認識float 浮動

從感性角度認識【float】浮動：

float設計的初衷並非爲了高大上的佈局，僅僅是實現文字環繞效果，明白了文字設計的初衷，就能夠明白浮動不少特有的表現了

<style>

.test1{
        width:400px;
        margin:20px;

}

img{
        float:left;
        margin-right:15px;

}
</style>
<div class="test1">

<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg"/>

<p>學術論文是對某個科學領域中的學術問題進行研究後表述科學研究成果的理論文章。</p>
<p>實際上，當年，我還在念大學那會兒，我就把我收藏的一些美女照片調成成固定的幾個比例，專門用來作演示使用。</p>
<p>學術論文是對某個科學領域中的學術問題進行研究後表述科學研究成果的理論文章。
學術論文的寫做是很是重要的，它是衡量一我的學術水平和科研能力的重要標誌。在學術論文撰寫中，選題與選材是頭等重要的問題。一篇學術論文的價值關鍵並不僅在寫做的技巧，也要注意研究工做自己。在於你選擇了什麼課題，並在這個特定主題下選擇了什麼典型材料來表述研究成果。科學研究的實踐證實，只有選擇了有意義的課題，纔有可能收到較好的研究成果，寫出較有價值的學術論文。因此學術論文的選題和選材，是研究工做開展前具備重大意義的一步，是必不可少的準備工做。學術論文，就是用系統的、專門的知識來討論或研究某種問題或研究成果的學 理性文章。具備學術性、科學性、創造性、學理性。</p>
<p>然而，事實是什麼呢？</p>

</div>

1.float的包裹特性：

所謂包裹，就像穿了緊身衣同樣，按照自身的寬高呈現出來，就是指包含內容的容器

包裹有三種特性：

          1.收縮：☞ 水平方向變窄，即寬度收縮爲自身內容的寬度
        2.堅挺：☞ 高度和內容自身的高度同樣
        3.隔絕：☞ 塊級格式化上下文

2.float的「破壞」特性：

所謂「破壞」，其實指的是當對一個容器內的內容元素設一個float：left，或者是float:right屬性時會形成父元素容器高度的塌陷，雖然如此，但他其實並無破壞什麼，爲何這麼說呢？————

****答案就是float的初衷：float僅僅是爲了實現文字環繞效果

父元素塌陷後，下面的文字就會環繞上來，這也就是浮動裏文字環繞圖片的緣由所在

3.解決這種「破壞」的方法，請看下面：

——清除浮動

兩大方法：

1.在底部插入樣式爲clear：both的div，跟外部依然是直接接觸的，可發生margin重疊的效果。
2.讓父元素BFC是高級瀏覽器特有的概念或haslayout(IE6,IE7)私有的，但不會與外面發生影響，即不會發生margin重疊的效果。

4.浮動的濫用

浮動可讓元素block塊狀化

「破壞性」形成的緊密排列特性（去空格化）**

float砌磚佈局容錯性很差，容易出問題；
須要尺寸是一直固定的，因而當一個模塊須要在另外一個尺寸的容器中使用時，就會須要從新調整，徹底沒有重用性；
在低版本的IE下會有不少問題。

5.float與流體佈局

文字環繞衍生——單側固定

這種佈局的基本佈局結構以下：
前面一個標籤元素：

width:px;
float:left;

後面總體：

padding-left/margin-left