浮動。什麼是浮動？元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
浮動可以用來幹什麼：浮動是css布局的利器，我們可以通過浮動來靈活地定位頁面元素，以達到布局網頁的目的。
語法：float: 取值;
三種取值方式
再來舉例看看怎麼用的
這是正常的乙個父級元素裡面正常排列三個子元素
效果展示
然後看看我們給父級樣式裡加入float：left這個語法後再來看看效果
效果如下
可以看到這多個塊級元素不再每個橫向排列獨佔一行。而是全部緊挨著橫向排列為一排
同樣可以試試設定了右浮動後產生了什麼效果。
再來看看在給第乙個子元素加入了浮動的後的效果
展示效果
看到第乙個設定了浮動後第二個綠色塊元素不見了
其實這是因為設定了浮動的元素會脫離文件流後，脫離文件流的元素不再佔據原有的空間，因此其他的元素上前補位。而且第二個結論，看見綠色的內容被留在藍色這個塊元素裡面了，這樣出現了文字環繞的效果。
如果將元素設定為浮動之後那麼它將具備以下幾個特點：
1.浮動元素會被排除在文件流之外，（脫離文件流）元素是不占有之前的頁面空間，其他元素會上前補位
2.浮動元素會停靠在父元素的左邊或右邊，或者停留在其他已經浮動的元素的邊上
3.浮動元素只會在當前行內浮動。
4.浮動元素擁有浮動功能之後依然還存在於父級元素中，只是飄起來了。
5.浮動處理----讓多個塊元素合成一排。
還是以上面的事例為例子
當父級的寬度不夠時，最後乙個元素將被強制換行
就是這樣的情況
第二個是元素一旦浮動起來之後寬度就會變成自適應（非人為制定的情況下）
把每個div的寬去掉再浮動就會出現
第三個元素一旦浮動起來那麼將會變成塊級元素，尤其對行級元素影響最大
例如乙個span標籤是本身是不能設定寬高的，設定了浮動後就能設定它的寬高了
第四個文字和行內元素會進行文字環繞的方式進行排列
當改變第二元素的寬就會出現文字環繞了
總結1.父元素的寬度顯示不是所有已浮動元素最後乙個元素將被強制換行（卡主）
2.元素一旦浮動起來之後寬度就會變成自適應（非人為制定的情況下）
3.元素一旦浮動起來那麼將會變成塊級元素，尤其對行級元素影響最大
4.文字和行內元素會進行文字環繞的方式進行排列
由於浮動元素脫離文件流的所以會導致元素不占有父級元素的空間，那麼他會給父級元素帶來影響
解決方案
1.直接給父級設定高度
弊端：必須要知道父級元素的準確高度
2.父級浮動
弊端：對後續元素有影響，父級的margin 0 auto 失效
3.為父級父元素新增 overflow:hidden或者auto
弊端： 元素一旦溢位就出被跟著影藏
4.在父級元素裡面追加乙個空元素 並設定為 clear：both
CSS浮動 float,clear 通俗講解
很早以前就接觸過css，但對於浮動始終非常迷惑，可能是自身理解能力差，也可能是沒能遇到一篇通俗的教程。前些天小菜終於搞懂了浮動的基本原理，迫不及待的分享給大家。寫在前面的話 由於css內容比較多，小菜沒有精力從頭到尾講一遍，只能有針對性的講解。如果讀者理解css盒子模型，但對於浮動不理解，那麼這篇文...
CSS浮動 float,clear 通俗講解
很早以前就接觸過css，但對於浮動始終非常迷惑，可能是自身理解能力差，也可能是沒能遇到一篇通俗的教程。前些天小菜終於搞懂了浮動的基本原理，迫不及待的分享給大家。寫在前面的話 由於css內容比較多，沒有精力從頭到尾講一遍，只能有針對性的講解。如果讀者理解css盒子模型，但對於浮動不理解，那麼這篇文章可...
CSS浮動 float,clear 通俗講解
前段時間在網上看到一篇文章 css浮動 float,clear 通俗講解 對我這種剛入門的菜鳥來說，淺顯易懂。故 過來。很早以前就接觸過css，但對於浮動始終非常迷惑，可能是自身理解能力差，也可能是沒能遇到一篇通俗的教程。前些天小菜終於搞懂了浮動的基本原理，迫不及待的分享給大家。寫在前面的話 由於c...