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

專(zhuān)注于為中小企業(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í)間，專(zhuān)門(mén)給講講BFC以及實(shí)例的東西。就這樣吧，上代碼：

    
        
        
        
    
    
        
        

            
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.
            
right這里的overflow:hidden不是本來(lái)的意思（超出容器內(nèi)容截取掉不顯示），而是利用了BFC規(guī)則（overflow不為visible時(shí)會(huì)創(chuàng)建出一個(gè)BFC）
        
    

注意代碼中最長(zhǎng)的那行（37行），這里的文本不是英文，是拉丁文，當(dāng)然不是我手打的這么多。跟大家分享下，在測(cè)試時(shí)，想輸入一些內(nèi)容又不知道輸入什么，怪難看的時(shí)候，可以偷懶。輸入lorem，然后tab鍵出來(lái)，除了第一句話(huà)時(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è)資訊頻道！