web前端寫頁面，肯定離不開一種布局，左右布局，左右布局裡面，最常用到，也少出問題的就是浮動對齊float/left/right。作為乙個資深的老初級前端，別的不敢說，這個浮動我還是摸得很透徹的，前些日子與同事對這個右浮動產生了一些分歧，無法睡服他，也只能寫一篇文章來做自我安慰了。
首先來說說浮動的概念以及其產生的效果。
定義和用法
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定乙個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
可能的值
值 描述
以上是我摘抄的比較官方的說法，用來湊字數的，可以不用看，接下來看我的個人理解：
浮動是指乙個元素相對下乙個元素的排版方式，改變和直接影響的是本元素與下乙個元素的排版；
第乙個元素左浮動情況下，第二個元素流體排列無法填充上乙個元素的高度時，第三個元素自動向上繼承左浮動所產生的影響，依次類推。如下圖**及顯示效果
第乙個元素右浮動的情況下，第乙個元素會向右對齊，第二元素會繼承第乙個元素的預設初始點（這個初始點是所有頁面的統一規則，預設的左上角為初始位置），如下圖顯示效果及**
左浮動不用管，這裡主要說一下右浮動，當初與同事產生的分歧也就是在這裡：
左右布局兩個div，右浮動究竟應該寫在第乙個div上還是第二個div上？
這裡我的答案是左右布局的兩個div，右浮動應該寫在第乙個div上。
為什麼是這個規則？
首先確定一點，不管右浮動的div會影響誰，右浮動屬性會使本身div在右側對齊；
其次，預設的初始位置是左上，浮動之後就會變成右上，浮動的這個屬性是在「左」「右」的這條水平線上進行位移。
如果左上有第乙個div，那麼預設的第二個div會在第乙個div的下方定位；因為第乙個位置已經被第乙個div佔了，在沒有浮動的情況下，他佔據的是第乙個整個從左到右的水平全部位置，儘管他可能顯示效果就幾畫素，就是這樣的機制，別問我為什麼，我也不知道；而第二個div只能從第二個位置開始定位，如果這時候給第二個div新增右浮動，產生的結果就是第二個div在第二個水平位置進行右對齊，而不是第乙個div的水平位置右對齊，因為第乙個位置已經被第乙個div給水平佔滿了。
結果就是下圖顯示效果，a的水平區域都已經被a佔滿了，b的右浮動只能從b的初始位置進行右位移。
以上就是我左右布局的兩個div，右浮動應該寫在第乙個div上的原因
當然，你們可以用a的左對齊重置b的初始位置到a的右上角，管不了管不了。只是我會堅持我的右對齊理論，為什麼？因為規整，心理舒坦！
標籤向右對齊 右浮動的原理及規則
web前端寫頁面，肯定離不開一種布局，左右布局，左右布局裡面，最常用到，也少出問題的就是浮動對齊float left right。作為乙個資深的老初級前端，別的不敢說，這個浮動我還是摸得很透徹的，前些日子與同事對這個右浮動產生了一些分歧，無法睡服他，也只能寫一篇文章來做自我安慰了。首先來說說浮動的概...
浮動原理及清浮動筆記
一句話解釋 元素浮動後，會脫離文件流，接著會按照指定的方向移動，一直到碰到父級的邊界或另外乙個元素為止。浮動的 folat left right none，none 表示為不浮動，完全沒有浮動的效果。使塊元素在一行顯示 使內嵌支援寬高 不設定寬度時，寬度由內容撐開 脫離文件流 文件流是文件中可顯示物...
浮動的工作原理及清除浮動的技巧
浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。1.使用空標籤清除浮動。這種方法是在所有浮動標籤後面新增乙個空標籤 定義css clear both.弊端就是增加了無意義標籤。2.使用overflow。給包含浮動元素的父標籤新增css屬性 overflow auto ...