CSS浮動是什么

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

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比下城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式下城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋下城地區(qū)。費用合理售后完善，十年實體公司更值得信賴。

浮動前:

浮動后:

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

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

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

由于設(shè)置了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屬性

方式一：在設(shè)置float的兄弟元素最后設(shè)置一個元素，對其設(shè)置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元素設(shè)計的初衷雖然是文字環(huán)繞圖片,但是目前其最廣泛的應(yīng)用卻是在布局領(lǐng)域，下面除了介紹如何應(yī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設(shè)置為懸浮后會發(fā)生什么

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

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

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

4.基礎(chǔ)原理大概介紹完畢，那么如何利用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浮動的基本知識，由于篇幅原因有些比較基礎(chǔ)細致的知識沒有包含，大家感興趣可以自己學習下!

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

新聞名稱：CSS的浮動及其在布局中的應(yīng)用
標題來源：http://www.chinadenli.net/article10/igpego.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、自適應(yīng)網(wǎng)站、企業(yè)建站、商城網(wǎng)站、虛擬主機、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)