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

CSS浮動是什么

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

浮動前:

浮動后:

代碼實現(xiàn)如下(簡化版)

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

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

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

浮動前

浮動后

高度塌陷帶來的問題

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

演示代碼

<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>

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

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

清除浮動后的效果

新建BFC

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

根元素或其它包含它的元素
浮動 (元素的 float 不是 none)
絕對定位的元素 (元素具有 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 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元素設計的初衷雖然是文字環(huán)繞圖片,但是目前其最廣泛的應用卻是在布局領(lǐng)域，下面除了介紹如何應用在布局外，還會介紹幾種常見的float布局方式，下面給出了最簡單的流式布局樣式

1.傳統(tǒng)流式布局

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

代碼演示

<div class="div1" >
    div1
</div>
<div class="div2" >
    div2
</div>
<div class="div3" >
    div3
</div>
<div class="div4" >
    div4
</div>

2.我們將div2設置為懸浮后會發(fā)生什么

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

3.再將div3懸浮后會發(fā)生什么

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

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

代碼示例(為了美觀做了部分調(diào)整，關(guān)注重點即可)

<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>

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

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

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