BFC規(guī)則如何實(shí)現(xiàn)的css兩列布局

這篇文章主要介紹BFC規(guī)則如何實(shí)現(xiàn)的css兩列布局，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)吉木薩爾免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

css要實(shí)現(xiàn)常見(jiàn)的自適應(yīng)兩列布局的方式方法挺多。

這里講的是利用設(shè)置overflow不為visible時(shí)會(huì)形成新的BFC來(lái)實(shí)現(xiàn)。至于什么是BFC，可以搜搜看先，基本都講的差不多了。等有更多空余時(shí)間，專門(mén)給講講BFC以及實(shí)例的東西。就這樣吧，上代碼：

<!-- 利用BFC的overflow hidden實(shí)現(xiàn)兩列布局-->
<!DOCTYPE html>
<html>
    <head>
        <title>利用BFC規(guī)則實(shí)現(xiàn)兩欄布局</title>
        <meta charset="utf8">
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .contain {
                width: 100%;
                height: 100%;
                background: grey;
                color: #fff;
            }
            .contain .left {
                float: left;
                /*margin-right: 20px;*/
                width: 200px;
                height: 100%;
                word-wrap: break-word; /* 用于純數(shù)字和英文時(shí)能夠超出時(shí)自動(dòng)換行*/
                background: blue
            }
            .contain .right {
                height: 100%;
                overflow: hidden;    /* 讓right成為一個(gè)BFC*/
                word-wrap: break-word; /* 用于純數(shù)字和英文時(shí)能夠超出時(shí)自動(dòng)換行*/
                background: darkblue;
            }
        </style>
    </head>
    <body>
        <!-- CSS2.1規(guī)范中已經(jīng)明確提出，設(shè)置overflow屬性（非visible）能觸發(fā)塊級(jí)格式化上下文(Block Formatting Conext, BFC)。 -->
        <div>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quis error ea veniam animi quibusdam, nobis repudiandae consectetur sed? Minus architecto cumque perspiciatis saepe rerum non dolorum voluptates similique, consequuntur.</div>
            <div>right這里的overflow:hidden不是本來(lái)的意思（超出容器內(nèi)容截取掉不顯示），而是利用了BFC規(guī)則（overflow不為visible時(shí)會(huì)創(chuàng)建出一個(gè)BFC）</div>
        </div>
    </body>
</html>

注意代碼中最長(zhǎng)的那行（37行），這里的文本不是英文，是拉丁文，當(dāng)然不是我手打的這么多。跟大家分享下，在測(cè)試時(shí)，想輸入一些內(nèi)容又不知道輸入什么，怪難看的時(shí)候，可以偷懶。輸入lorem，然后tab鍵出來(lái)，除了第一句話時(shí)固定的，后面的那段時(shí)它隨機(jī)出來(lái)的句子。前提是你的編輯器裝有emmit插件，Hbuilder，vscode內(nèi)置有，直接可用，submit text需要去裝插件。記事本就肯定是不行的了，這些都是我親測(cè)的。算是一個(gè)小干貨吧！其他的，注釋也差不多寫(xiě)了，本來(lái)代碼也很簡(jiǎn)單，就這么些東西，css需要自己多動(dòng)手去試，去實(shí)現(xiàn)出來(lái)。這次隨筆就到這兒了，忙的時(shí)候質(zhì)量可能不太好，不過(guò)現(xiàn)在開(kāi)始堅(jiān)持寫(xiě)一些東西了。

還有就是這是左邊固定，右邊自適應(yīng)。右邊固定，左邊自適應(yīng)相信你也能輕松搞定吧，這都是小事，想起了，提醒下。這個(gè)兩列自適應(yīng)不是兩列都是自適應(yīng)的。

以上是BFC規(guī)則如何實(shí)現(xiàn)的css兩列布局的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：BFC規(guī)則如何實(shí)現(xiàn)的css兩列布局
鏈接地址：http://muchs.cn/article26/jehhcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站排名、網(wǎng)站收錄、電子商務(wù)、用戶體驗(yàn)、自適應(yīng)網(wǎng)站

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

猜你還喜歡下面的內(nèi)容