CSS中浮動屬性(float)設計的初衷是為了解決頁面展示樣式時需要文字環繞圖片的場景；類似於Word中的文字環繞屬性，基礎使用場景如下:

浮動前:

浮動後:

代碼實現如下(簡化版)

<style>
 img{
        float:left;
 }  
</style>
<div>
    <img src="xxx.jpg" alt="test">
    <p>xxx</p>
</div>

float在布局中的使用

float元素設計的初衷雖然是文字環繞圖片,但是目前其最廣泛的應用卻是在布局領域，下面除了介紹如何應用在布局外，還會介紹幾種常見的float布局方式，下面給出了最簡單的流式布局樣式

1.傳統流式布局

每個div默認占據一行，不論寬度都會占滿此行；float布局的核心思想就是怎麽把這些一行一行的數據給他以美觀的方式呈現出來

代碼演示

<div class="div1" style="background-color:red;height:100px;width:350px">
    div1
</div>
<div class="div2" style="background-color:blue;height:120px;width:200px">
    div2
</div>
<div class="div3" style="background-color:green;height:140px;width:50px">
    div3
</div>
<div class="div4" style="background-color:yellow;height:100px;width:600px">
    div4
</div>
 

2.我們將div2設置為懸浮後會發生什麽

為什麽會出現這種情況呢?div3莫名其妙的變短了?
其實並不是div3變短了，而是div2設置浮動後脫離了頁面的流，懸浮在了其他元素的上面，而div2脫離後div3自然的向上補充，帶著div4整體上移，又被div2擋住了一部分所以出現了上圖中的情況，對比看一下div2右浮動就比較清晰了

3.再將div3懸浮後會發生什麽

同理，這裏div2 div3脫離標準流並懸浮其上,組成了一個新的層次；div4直接上移，部分被di2和div3所遮擋

4.基礎原理大概介紹完畢，那麽如何利用float將上面的代碼構造出美觀的效果呢

代碼示例(為了美觀做了部分調整，關註重點即可)

<style>
    .div1,.div2,.div3{
        float:left;
        margin:0 10px;
    }
    .div4{margin:10 10px;}
    .clear-fix::after {
            content: "";
            display: table;
            clear: both;
        }
</style>
<main class="clear-fix">
<div class="div2" style="background-color:blue;height:120px;width:100px;">
    div2
</div>
<div class="div1" style="background-color:red;height:100px;width:350px;">
    div1
</div>
<div class="div3" style="background-color:green;height:140px;width:50px;">
    div3
</div>
</main>
<div class="div4" style="background-color:yellow;height:30px;width:540px">
    div4
</div>

最終樣式如下，是網頁中非常常見的三列布局方式

CSS的浮動及其在布局中的應用