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

標籤：ec2   關注   樣本   預設   code   com   一個   利用   代碼   

CSS浮動是什麼

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的浮動及其在布局中的應用