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

CSS浮動是什么

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

浮動前:

浮動后:

代碼實現如下(簡化版)

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

浮動帶來的問題--高度塌陷

由于設置了float后元素脫離了標準流，從而導致了高度的塌陷，這里有一個很直觀的例子

浮動前

浮動后

高度塌陷帶來的問題

當出現高度塌陷后原本想放在下面的元素會自動向上補充，出現這種結果

演示代碼

<style type="text/css">
    .div1{
        height:100px;
        width:100px;
        background:blue;
        float:left;
    }
    .div2{
        height:10px;
        width:300px;
        background:red;
    }
</style>
<main>
    <div class="div1"></div>
    <p>這里是一個段落</p>
</main>
<div class="div2"></div>

如何解決塌陷--清除浮動

清除浮動主流方法有兩種:1）使用clear屬性清除浮動；2）新建BFC

利用clear屬性

方式一：在設置float的兄弟元素最后設置一個元素，對其設置clear屬性，如下

<style type="text/css">
    .div1{
        height:100px;
        width:100px;
        background:blue;
        float:left;
    }
    .div2{
        height:10px;
        width:300px;
        background:red;
    }
    .clearfix{
        clear:both;
    }
</style>
<main>
    <div class="div1"></div>
    <p>這里是一個段落</p>
    <table class="clearfix"></table>
</main>
<div class="div2"></div>

方式二：
方式一的缺點還是很明顯的，就是平白無故的新增了一個沒有內容的元素，使頁面出現冗余；這里可以利用偽元素來達到同樣的效果

main::after{
        content:"";
        display:table;
        clear:both;
    }

清除浮動后的效果

新建BFC

該方法的原理是：父元素在新建一個 BFC 時，其高度計算時會把浮動子元素的包進來。那么如何新建一個BFC呢

根元素或其它包含它的元素
浮動 (元素的 float 不是 none)
絕對定位的元素 (元素具有 position 為 absolute 或 fixed)
內聯塊 inline-blocks (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
塊元素具有overflow ，且值不是 visible
display: flow-root
雖然有這么多方法可用，可我們常用的就是 overflow: hidden

    main{
        overflow:hidden;
    }

也可以達到清除浮動的效果

float在布局中的使用

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

1.傳統流式布局

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

代碼演示

<div class="div1" >
    div1
</div>
<div class="div2" >
    div2
</div>
<div class="div3" >
    div3
</div>
<div class="div4" >
    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" >
    div2
</div>
<div class="div1" >
    div1
</div>
<div class="div3" >
    div3
</div>
</main>
<div class="div4" >
    div4
</div>

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

這里介紹了CSS浮動的基本知識，由于篇幅原因有些比較基礎細致的知識沒有包含，大家感興趣可以自己學習下!

下面一篇博客會有具體的例子供大家參考，有需要的可以看下