在頁面的布局過程中浮動是個好東西，我們經(jīng)常會用到浮動布局，它可以使元素共享一行，極大的方便了我們的布局過程。但是很多人可能只是會用，對浮動的原理只是一知半解，如果沒有清晰的認識到浮動所帶來的影響以及如何清除浮動所帶來的影響，那么面對代碼量龐大的頁面將會變得一頭霧水。所以接下來我們來深入學(xué)習(xí)一下浮動布局，相信大家把浮動這個概念掌握的很清晰的時候，以后運用起來將會更加得心應(yīng)手。
一. 什么是浮動布局？
CSS 的 Float（浮動），會使元素向左或向右移動，使元素共享一行，類似于給元素加了inline-block的作用。在w3c中這樣描述浮動：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。接下來我們具體來看。
二. 浮動帶來的影響
1. 脫離文檔流，不占據(jù)頁面空間
我們知道，css的塊級元素比如說div在頁面中默認是獨占一行并且自上而下排列，也就是我們所說的流，也就是我們通常所說的標(biāo)準(zhǔn)流，接下來我們來看以下的案例：
html代碼：
<div class="div1">150 * 100</div><div class="div2">100 * 150</div><div class="div3">300 * 200</div>
css代碼：
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式