css float的詳細講解（附實例）

這篇文章帶給大家的內容是關於css float的詳細講解（附實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

div css佈局，是前端開發人員的核心技能，在工作中佔很大的比重。好的前端佈局是進行javascript書寫和互的基礎，足見佈局的重要性，今天我們就講講css佈局的基石-float。可以說，沒有浮動，就談不上佈局了。

1、float的產生

互聯網產生從一開始到日漸壯大，期間借鑒了大量印刷排版的理念和技術，比如一開始互聯網的發明，就是將文檔電子化互相鏈接。

而後的table佈局的發明，也是印刷專家完成的，直到css出現，依然可以看到印刷的影子，當然這也無可厚非，比如float的出現就是為了應對圖文並茂的排版出現的。

下面傳統的印刷排版常見的佈局-文字環繞，就是float的常見應用場景之一。

我們看看如何實現，

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>JS暗黑编年史</title>
    <style>
        img{
            float:left;
        }
    </style>



    <p>
        <img  src="/static/imghwm/default1.png" data-src="https://jetorz.github.io/assets/Brendan-Eich.jpg" class="lazy" alt="css float的詳細講解（附實例）" >
        在一个一个炎热的下午，大家注意，一定要是炎热的下午，为什么要是炎热的下午呢，因为天气一热，人就容易烦躁，人一烦躁就不想工作，不工作就想看片儿（注意看片儿不是看电影），但是你知道的越看片儿越烦躁，正在这个时候老板娘进来来了，对js的作者布莱登·艾克说，小艾啊你看我们用猫上网的时候用户名密码填错了结果等一两分钟返回结果的时候才知道是错了，你看你能不能搞一个程序让我在请求之前就知道我写错了，其实小艾心里不想搞，但是大家都懂的，老板好拒绝，老板娘的需求是不好拒绝的，所以布莱登艾克心想赶紧随便糊弄一下算了，片儿还没看完呢，所以他就用了8天半（官方说）10天，其实另外的一天半被他用来看片儿了。大家懂的，你看片儿的时候有心思写代码吗？所以js的bug如山一样多，这个我们以后说。
    </p>

2.float的經典場景

#除了上面的經典用法之外，float還有幾個更複雜也更通用的場景，首先是整站佈局。

程式碼如下，

nbsp;html>



    <style>
        #header {
            background-color: black;
            color: white;
            text-align: center;
            padding: 5px;
        }

        #nav {
            line-height: 30px;
            background-color: #eeeeee;
            height: 300px;
            width: 100px;
            float: left;
            padding: 5px;
        }

        #section {
            width: 350px;
            float: left;
            padding: 10px;
        }

        #footer {
            background-color: black;
            color: white;
            clear: both;
            text-align: center;
            padding: 5px;
        }
    </style>




    <div>
        <h1 id="我是头部">我是头部</h1>
    </div>

    <div>
        html教程<br>
        css教程<br>
        js教程<br>
    </div>

    <div>
        <h2 id="js暗黑编年史">js暗黑编年史</h2>
        <p>
            在一个一个炎热的下午，大家注意，一定要是炎热的下午，为什么要是炎热的下午呢，因为天气一热，人就容易烦躁，人一烦躁就不想工作，不工作就想看片儿（注意看片儿不是看电影），但是你知道的越看片儿越烦躁，正在这个时候老板娘进来来了，对js的作者布莱登·艾克说，小艾啊你看我们用猫上网的时候用户名密码填错了结果等一两分钟返回结果的时候才知道是错了，你看你能不能搞一个程序.
        </p>
       
    </div>

    <div>
        我是footer
    </div>

還有類似淘寶的商品佈局也很普遍，

實作程式碼如下，

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        #div2{
            background: red;
            margin-right: 10px;
            height: 300px;
        }
        #div3{
            padding: 5px;
        }
        #div2,#div3{
            float: left;
            width:300px;
           
        }
    </style>


    <div>
        <div>

        </div>
        <div>
            <h3 id="我是标题">我是标题</h3>
            <p>我是一段描述的文字我是一段描述的文字我是一段描述的文字我是一段描述的文字</p>
        </div>
    </div>

3.float的常見問題

1.寬度不夠,會擠下來

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        #wrap{
            width:1000px;
            margin: 0 auto;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;

        }
    </style>


    <div>
        <div>左侧</div>
        <div>右侧</div>
    </div>

解決：

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        #wrap{
            width:1000px;
            margin: 0 auto;
            border:5px solid yellow;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;
            box-sizing: border-box;
            }
    </style>


    <div>
        <div>左侧</div>
        <div>右侧</div>
    </div>

如圖所示，大家會發現其實外層div的高度沒有撐開，這裡我不想解釋原因，扯什麼BFC啦，文檔流啦，為什麼？

程式設計就像學習騎腳踏車，你看過別人怎麼騎車，也知道踏板是用來蹬的，車座是用來座的，車把是用來掌握方向就夠了，你沒必要從一開始研究：

登山車30速對應的是：這個登山車的變速套件是由3片式牙盤和10片式飛輪組成，可以變換30種傳動比，也就是齒比。詳細的解釋是：前面牙盤有三個盤，後面飛輪有10個，3x10就是30速，如果後面有9個飛輪就是27速，速別就是前面的盤的數量乘後面輪的數量，一般情況下前面都是三個盤，主要差距在於後面的小飛輪，常見的速別有18、21、24、27、30。

畢竟你不可能一開始學騎車就想著將來成為秋名山車神。

即使你學會這些，對於你學習騎車沒有什麼幫助，就像你即使知道了高度沒有撐起來是因為沒有觸發BFC，就算是你知道了文檔流和常規流，知道了float的預設值是none，對於你能流暢的佈局有多少幫助呢？

我不是否認這些知識的價值，是要讓你懂得輕重緩急。畢竟如果你連最基本的float佈局都寫得磕磕絆絆，你研究那些有什麼意義呢？先把典型的版面記住，學會，用熟，然後再聊其他的。繼續第二個問題，

2.高度不夠，直接一句話，記住就好

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        #wrap{
            width:1000px;
            margin: 0 auto;
            border:5px solid yellow;
            overflow: hidden;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
    </style>


    <div>
        <div>左侧</div>
        <div>右侧</div>
    </div>

其實就一句話，

overflow: hidden;

先記住就好，等你長大了就明白了。

說第三個問題，

明顯footer位置不對，這是一個特性，float後面的元素會自動跟隨，並儘量靠上靠左。問題是明顯footer是不願意跟著右側元素混的，他應該在下面。咋弄？清除浮動。

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        #wrap {
            width: 1000px;
            margin: 0 auto;
            border: 5px solid yellow;
            overflow: hidden;
        }

        div {
            border: 5px solid #000;
        }

        .main {
            border: 0;
        }

        #left {
            width: 200px;
            background: red;
            height: 400px;
            float: left;
            box-sizing: border-box;
        }

        #right {
            width: 800px;
            background: green;
            height: 200px;
            float: left;
            box-sizing: border-box;
        }

        .clearFix:after {
            content: &#39;&#39;;
            display: block;
            clear: both;
        }

        .clearFix {
            zoom: 1;
        }
    </style>



    <div>
        <div>
            <div>左侧</div>
            <div>右侧</div>
        </div>

        <div>我是帅气的footer</div>
    </div>

注意，這裡在left和right外麵包了一層div，然後添加了class

        .clearFix:after {
            content: '';
            display: block;
            clear: both;
        }

        .clearFix {
            zoom: 1;
        }

這裡你不會都沒關係，先記住會用就好。記住代碼就像騎自行車，騎得多了自然就知道怎麼騎了，熟練了以後再去騎山地車，公路車，入門就會很快。

#

以上是css float的詳細講解（附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！