溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-10-16 15:42:15 來(lái)源：億速云 閱讀：150 作者：小新 欄目：web開發(fā)

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

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

這里講的是利用設(shè)置overflow不為visible時(shí)會(huì)形成新的BFC來(lái)實(shí)現(xiàn)。至于什么是BFC，可以搜搜看先，基本都講的差不多了。等有更多空余時(shí)間，專門給講講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è)小干貨吧！其他的，注釋也差不多寫了，本來(lái)代碼也很簡(jiǎn)單，就這么些東西，css需要自己多動(dòng)手去試，去實(shí)現(xiàn)出來(lái)。這次隨筆就到這兒了，忙的時(shí)候質(zhì)量可能不太好，不過現(xiàn)在開始堅(jiān)持寫一些東西了。

還有就是這是左邊固定，右邊自適應(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)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手