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