在頁面的布局過程中浮動是個好東西，我們經常會用到浮動布局，它可以使元素共享一行，極大的方便了我們的布局過程。但是很多人可能只是會用，對浮動的原理只是一知半解，如果沒有清晰的認識到浮動所帶來的影響以及如何清除浮動所帶來的影響，那麼面對**量龐大的頁面將會變得一頭霧水。所以接下來我們來深入學習一下浮動布局，相信大家把浮動這個概念掌握的很清晰的時候，以後運用起來將會更加得心應手。
css 的 float（浮動），會使元素向左或向右移動，使元素共享一行，類似於給元素加了inline-block的作用。在w3c中這樣描述浮動：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。接下來我們具體來看。
我們知道，css的塊級元素比如說div在頁面中預設是獨佔一行並且自上而下排列，也就是我們所說的流，也就是我們通常所說的標準流，接下來我們來看以下的案例：
html**：
<div
class
="div1"
>150 * 100
div>
<
div
class
="div2"
>100 * 150
div>
<
div
class
="div3"
>300 * 200
div>
css**：
.div1.div2.div3
效果如下圖：
（一看這個顏色就知道樓主是個女孩紙，
如何清除浮動帶來的影響
在前端開發中，清除浮動的方法有多種，開發人員可以根據自己的喜好選擇不同的方式。1 將設定float的元素的父元素也設定float。父元素也設定浮動，侷限性較大。2 設定父元素的overflow為hidden。3 設定父元素的display為inline block。缺點 可能不符合情況要求。4 浮動...
如何解決浮動帶來的影響
選擇器名 設定了浮動的框可以向左 left 或向右 right 移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。浮動並不存在於文件流之中。當我們給子元素設定了浮動float left或float right或兩者，但是沒有給父元素設定高度時，就會出現父元素高度塌陷問題。因為浮動元素脫離了文件...
浮動布局，以及如何清除浮動
主頁 主頁 冰山一樹sankey csdn主頁 csdn主頁 冰山一樹sankey 網頁布局的本質 用 css 來擺放盒子。把盒子擺放到相應位置.css 提供了三種傳統布局方式 簡單說,就是盒子如何進行排列順序 所謂的標準流 就是標籤按照規定好預設方式排列 行內元素會按照順序，從左到右順序排列，碰到...