我不清楚他人是如何看待css的，css的這些屬性在他們心中是個什麼東西，他們到底賦予了多少自身的情感（或人格或品性或特質等）在這些**身上，他們是否已經意識到這些css屬性身上正一點一點地融入他們情感化的一些東西。但我清楚自己，在這些css的屬性身上新增了很多個人的色彩，這種情感化的東西可以說讓我更好的理解css，我想這不難理解，舉個例子：假設你將每個css屬性看做是你的孩子，每個孩子有著不同的性格，隨著學習你會挖掘到更多的一些性格，這就好比母親看著自己的孩子一點點長大，到了一定的程度就會把自己的孩子的性格摸得一清二楚，管教也就從容了。
當然，我並沒有對css所有的屬性都有很清晰的情感化的理解，我用css才幾年啊，我要學的還有很多。但是，對於css中常用的float屬性，我還是有些感覺的，這也是本文的主旨所在。本文將會從我的一些感性的認識的角度講解css float屬性。
所以，這裡，你會看到別樣的技術文章。
二、浮動的情感化認識
我對浮動感性化的認識：浮動就是乙個**，魔鬼，自私自利且影響他人的混球。我討厭浮動。
三、浮動的原始意義是什麼？
我們使用float浮動做了很多其本職工作以外的事情，於是我們會混淆，我們會回看不清float真正的面目。浮動真正的意義在**呢？要知道這個問題的答案很簡單，假設現在css中沒有浮動(float)屬性，那麼會變成乙個什麼樣子。
我們會發現，目前流行採用浮動方法實現的無論是分欄布局，還是列表排列我們都可以用其他一些css屬性（不考慮table）代替實現，唯一乙個實現不了的就是「文字環繞**」，我是想不出來能有什麼方法可以讓文字環繞**顯示。好，這個替代不了的作用才是float真正的意義所在。此作用類似於word中的版式，很基礎的原始的作用：
例如左邊這張word截圖就含有左浮動屬性(float:left)，這才是浮動應該做的事情。這是非常重要的結論，這是深入理解浮動屬性的基礎，我們後面**的一些浮動相關的問題都可以由這裡引申出來，所以，請記住，浮動出現的意義其實只是用來讓文字環繞**而已，僅此而已。
而我們目前用浮動實現頁面布局本不是浮動該幹的事情。
四、浮動的本質是什麼？
我將浮動的本質定義為「包裹與破壞」！
1. 浮動的「包裹性」
先說句您應該沒有見過的結論：撇開浮動的「破壞性」，浮動就是個帶有方位的display:inline-block屬性。
display:inline-block某種意義上的作用就是包裹(wrap)，而浮動也有類似的效果。舉個常見例子，或許您有實現寬度自適應按鈕的經驗，實現寬度自適應的關鍵就是要讓按鈕的大小自適應於文字的個數，這就需要按鈕要自動包裹在文字的外面。
我們用什麼方法實現呢？一就是display:inline-block；二就是float。
例如我們要實現新浪部落格中的「發表文章」之類的寬度自適應按鈕（如下圖）:
背景**為：
display:inline-block方法
css**如下：
.btn1.btn1 cite
html**如下：
inline-block方法
結果如下圖：
float:left方法
此方法的css**與上面的inline-block方法唯一不同之處就在於這裡是float:left;
css**如下：
.btn1.btn1 cite
html**如下：
float方法
結果如下圖：
上面這個例子旨在說明浮動屬性（無論是左浮動還是右浮動）某種意義上而言與display:inline-block屬性的作用是一模一樣的，所以類似於的css**超過95%的情況是沒有道理的(display:block是多餘的)。
然而，float無法等同於display:inline-block，其中原因之一就是浮動的方向性，display:inline-block僅僅乙個水平排列方向，就是從左往右，而float可以從右往左排列，這就是兩者的差異。
然而，我們又有多少情況需要元素從右往左排列呢？很少，所以，css中，沒有浮動這一屬性不是什麼大不了的事情，它其實就那麼回事。
2. 浮動的「破壞性」
浮動可以說是所有css屬性中的「破壞之王」。要理解浮動的破壞性，我們要從浮動最原始的意義入手。我在上面把浮動的原始意義用粗斜體表示出來了，就是「只是用來讓文字環繞**而已，僅此而已。
」所以，只要您弄明白了為什麼文字會環繞含浮動屬性的**，您就會知道我所說的浮動的「破壞性」是什麼意思了。//下面這部分內容是本文核心，多個人觀點，我盡量表述清楚。您若有興趣，可以放慢在這裡的閱讀速度。
先說結論：文字之所以會環繞含有float屬性的**時因為浮動破壞了正常的line boxes。
這裡有必要先講講line boxes模型。先看下面一段普通的html**：
這是一行普通的文字，這裡有個 em 標籤。
這段html**涉及到4種boxes：
1、首先是p標籤所在的containing box，此box包含了其他的boxes；
2、然後就是inline boxes，如下圖標註，
inline boxes不會讓內容成塊顯示，而是排成一行，如果外部含inline屬性的標籤(span,a,cite等)，則屬於inline boxes，如果是個光禿禿的文字，則屬於匿名inline boxes。
3、line boxes，見下圖的標註：
在containing boxes裡，乙個乙個的inline boxes組成了line boxes。這是浮動影響布局的關鍵box型別，下面會詳細闡述。
4、content area，見下圖標註：
content area 是一種圍繞文字看不見的box。content area的大小與font-size大小相關。
正常的**混排
預設情況下，**與文字混排應該是這個樣子：**與文字基線對齊，**與文字在同一行上，如下圖所示：
上圖中，**為乙個inline boxes，兩邊的文字也是inline boxes。由於line boxes的高度是由其內部最高的inline boxes的高度決定的，所以這裡line boxes的高度就是**的高度。此時**與文字是同一box型別的元素（都是inline boxes），是在同一行上的，所以，預設狀態下，一張**只能與一行文字對齊。
而要想讓一張**要與多行文字對齊，您唯一能做的就是破壞正常的line boxes模型。
含有浮動屬性的**與文字
先看一下**新增了float:left樣式後的表現，見下圖：
剛才說過，正常情況下，**自身就是個inline boxes，與兩側的文字inline boxes共同組成了line boxes，但是，一旦**加入了浮動，情況就完全變了。我認為是浮動徹底破壞了img**的inline boxes特性，至少有一點我可以肯定，**的inline boxes不存在了，被惡魔附體，變身了，而這個惡魔就是浮動。一旦**失去了inline boxes特性就無法與inline boxes的文字排在一行了，其會從line boxes上脫離出來，跟隨自身的方位屬性，靠邊排列。
這種狀態跟限制性內切酶起作用幾乎一致，一條基因鏈上(line boxes)有很多的基因(inline boxes)，然後限制性內切酶(float)會切除特定的dna序列，此序列(float元素)就會從基因鏈上脫離出來。
這個從line boxes上脫離的浮動元素其實就是乙個軀體，乙個空殼子，表象。因為其沒有inline boxes。有人可能會問，沒有inline boxes就沒有唄，有什麼大不了的？
非也非也！這個inline boxes很個很重要的概念。我曾在「css行高line-height的一些深入理解及應用」一文中提到過高度的本質，這裡有必要再講一遍。
在目前的css的世界中，所有的高度都是有兩個css模型產生的，乙個是box盒狀模型，對應css為」height+padding+margin」，另外乙個是line box模型，對應樣式為」line-height」。前者的height屬性分為明顯的height值和隱藏的height值，所謂隱藏的height值是指**的高度，一旦載入一張**，其內在的height值就會起作用，即使您看不到」height」這個詞。而後者針對於文字等這類inline boxes的元素（**也屬於inline boxes，但其height比line-height作用更兇猛，故其inline boxes高度等於其自身高度，對line-height無反應），inline boxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個原因），而真正的高度表現則是由每行眾多的inline boxes組成的line boxes（等於內部最高的inline box的高度），而這些line boxes的高度垂直堆疊形成了containing box的高度，也就是我們見到的div或是p標籤之類的高度了。
所以，對於line box模型的元素而言，沒有inline boxes，就沒有高度了，而浮動卻恰恰做了這麼齷齪的事情，其直接將元素的inline boxes也破壞了，於是這些元素也就沒有了高度。
CSS浮動屬性Float詳解
什麼是浮動？浮動是 css 的定位屬性。我們可以看一下印刷設計來了解它的起源和作用。印刷布局中，文字可以按照需要圍繞 一般把這種方式稱為 文字環繞 這是乙個例子 在排版軟體裡面，存放文字的盒子可以被設定為允許 混排，或者無視它。無視 混排將會允許文字出現在 的上面，就像它甚至不會在那裡一樣。這就是 ...
CSS布局詳解浮動屬性Float
相關文章 css布局 詳解定位屬性position 什麼是浮動？浮動是 css 的定位屬性。我們可以看一下印刷設計來了解它的起源和作用。印刷布局中，文字可以按照需要圍繞 一般把這種方式稱為 文字環繞 這是乙個例子 在排版軟體裡面，存放文字的盒子可以被設定為允許 混排，或者無視它。無視 混排將會允許文...
建築模型的屬性
1.建築模型是三維的 立體的建築設計表現形式，建築模型採用三維的 立體的表現形式，與二維平面的建築圖有很人的區別。建築模型作為設計人員的專業語言，借助於立體模型，對原建築設計中的功能，形態 構造 結構 空間 機理和色彩等進行廠多方位的探索。並發展和完善。建築模型的製作代表了一種創造性構思的發展過程。...