溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹BFC規則如何實現的css兩列布局，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
css要實現常見的自適應兩列布局的方式方法挺多。
這里講的是利用設置overflow不為visible時會形成新的BFC來實現。至于什么是BFC，可以搜搜看先，基本都講的差不多了。等有更多空余時間，專門給講講BFC以及實例的東西。就這樣吧，上代碼：
<!-- 利用BFC的overflow hidden實現兩列布局-->
<!DOCTYPE html>
<html>
<head>
<title>利用BFC規則實現兩欄布局</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; /* 用于純數字和英文時能夠超出時自動換行*/
background: blue
}
.contain .right {
height: 100%;
overflow: hidden; /* 讓right成為一個BFC*/
word-wrap: break-word; /* 用于純數字和英文時能夠超出時自動換行*/
background: darkblue;
}
</style>
</head>
<body>
<!-- CSS2.1規范中已經明確提出，設置overflow屬性（非visible）能觸發塊級格式化上下文(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不是本來的意思（超出容器內容截取掉不顯示），而是利用了BFC規則（overflow不為visible時會創建出一個BFC）</div>
</div>
</body>
</html>注意代碼中最長的那行（37行），這里的文本不是英文，是拉丁文，當然不是我手打的這么多。跟大家分享下，在測試時，想輸入一些內容又不知道輸入什么，怪難看的時候，可以偷懶。輸入lorem，然后tab鍵出來，除了第一句話時固定的，后面的那段時它隨機出來的句子。前提是你的編輯器裝有emmit插件，Hbuilder，vscode內置有，直接可用，submit text需要去裝插件。記事本就肯定是不行的了，這些都是我親測的。算是一個小干貨吧！其他的，注釋也差不多寫了，本來代碼也很簡單，就這么些東西，css需要自己多動手去試，去實現出來。這次隨筆就到這兒了，忙的時候質量可能不太好，不過現在開始堅持寫一些東西了。
還有就是這是左邊固定，右邊自適應。右邊固定，左邊自適應相信你也能輕松搞定吧，這都是小事，想起了，提醒下。這個兩列自適應不是兩列都是自適應的。
以上是BFC規則如何實現的css兩列布局的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
