在介紹css浮動屬性之前，我們要先了解什麼是css？什麼是屬性？
一．css：為層疊樣式表
官方解釋css是一種用來表現html和xml等檔案樣式的計算機語言。屬性，則是css語法中的關鍵字，一種屬性規定了格式修飾的乙個方面。接下來咱們舉個例子，我想會更容易理解一些。
首先，假設「你」就是html，你身上的器官包括四肢構成你身體的就是html中的各種標籤，接著你穿各種各樣的衣服來裝飾你自己，這就些衣服和裝飾品就是css。 也可以這麼理解：乙個毛坯房就是html框架，精裝房就是加了css。 屬性的話，就剛剛的第乙個例子：比如想把衣服的顏色設為紅色，那在css的屬性中例如為color：red；這就是css中的顏色屬性。還有很多屬性，通了這一條路，剩下的路也好走了很多。值得一提的是，css中還有很多屬性，不要淺顯的單一理解。
二．css浮動屬性
有了上面的解釋，我們來看css中的浮動屬性就方便很多了。浮動屬性是css眾多屬性中的一種。正常的文件流是自上而下的顯示順序（塊狀元素來說），而浮動屬性（float）就是讓上下排列的元素可以左右排列。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。浮動的元素仍然是網頁流的一部分。
float的屬性值有：left（左浮動）/right（右浮動）/none（元素不設定浮動）。浮動，從字面意思來說就是讓元素浮起來，浮起來後到了另乙個層面，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。新增了浮動屬性的元素不佔位置，後邊的元素會把之前的位置補上去（因為後面的元素還在之前那層，前面空了，便補上去）。
可以理解為排隊等電梯：一排人豎直排著隊準備去上班，第乙個人上了電梯即新增浮動，去了別的樓層，便不佔位置。第二個人便站到第乙個人剛剛排隊的位置上，後面的人緊隨其後，乙個接乙個補上去。注意此時沒上電梯排隊的人依然乙個接乙個豎直排隊。而上了電梯的人他們在一層，他們便可以左右並列顯示，但依舊按照「上電梯」的順序。所以不需要考慮其他層的人，只看自己層的前面是否有人佔位置。
當n個元素新增了左浮動，他們都浮起來在乙個層面，便開始「左右排列」顯示。浮動後排版的順序與html中標籤書寫順序有關。如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動元素便向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：
（右浮動同理）以兩個元素為例
（1）未新增float浮動屬性時，兩個元素自上而下顯示，在乙個層面，假設均在x層
（2）給第乙個元素新增浮動之後(例如左浮動)float：left; 第乙個元素浮起來，第二個元素補到之前第乙個元素的位置。出現該效果因為背景色為粉色的元素浮在背景色為綠色的元素上面。此時小粉在y層，大綠依舊在x層。
（3）給兩個元素都新增浮動之後，小粉和大綠都在y層，小粉先寫，小粉就在大綠左面（前面）顯示，兩個元素自左向右並列顯示在y層。以此類推n個元素的情況。
三、浮動的作用：
文字環繞、**應用，建立全部網頁布局等…
如果出現文字環繞效果，即採取第乙個元素浮動，第二個元素不浮動，將文字設定在第二個元素上。
（ps；可以理解為，文字夾在兩層之間，遇到之前有浮動的元素便擋住了去路）
如果改變將浮動的小粉大小改變，盒子裡的文字也將自動調整位置。
如果將小粉換為，並且設定浮動，隨著的變化，周圍文字的位置也隨之改變。
四、特殊小情況：
1.新增浮動之後的對屬性margin： 0 auto ；不生效。
2.塊狀元素設浮動，寬度隨內容而變化，一旦超出最大寬度，以最大寬度顯示。
其他情況還有待學習繼續新增
浮動屬性CSS
這是第1個盒子 這是第2個盒子 這是第3個盒子 這是乙個div1 這是乙個div2 這是乙個span1 這是乙個span2 浮動的盒子可以向左浮動，也可以向右浮動，直到它的外邊緣碰到包含框或另乙個浮動盒子為止。本網頁中共有三個，分別代表日用品 圖書和鞋子。這裡使用這三個和本段文本來演示講解浮動在網頁...
css浮動屬性
1 為什麼需要浮動 html中的標籤元素大致分為三類 塊狀元素 內聯元素 內聯塊元素。每種元素都有其各自的特點，其中塊狀元素會獨佔一行，而內聯元素和內聯塊元素則會在一行內顯示。如果我們想讓兩個甚至多個塊狀元素在同一行顯示，這就需要用到css的浮動屬性。2 什麼是浮動 float 浮動 float 是...
css浮動屬性
浮動屬性使用非常多 一般為垂直排布的瀑布流，但是如果使用浮動主題就可以將垂直變為水平 如果一行的寬度不夠就會換行顯示 浮動主要為了脫離文件流 垂直排列 語法 選擇符 特點 1.div塊元素失去 塊狀 換行顯示特徵，變為行內元素 2.緊貼上乙個浮動元素 同方向 或父級元素的邊框，如寬度不夠將換行顯示 ...