初識BFC

時間 2020-09-14

標籤 bfc 简体版

原文原文鏈接

　　在網頁的排版佈局中，都會用到float（浮動）來讓網頁的排版更加自由，突破塊級元素獨霸一行的特性。可是當咱們將這些塊級元素進行浮動後，咱們會發現這些塊級元素已經脫離了本來的文檔流，css

跳出三界不在五行中了。這會給咱們帶了不少沒必要要的麻煩。這時候就須要用到BFC了。博主在剛接觸BFC時也對其懵懵懂懂，但本着不懂不能裝懂，不懂就要弄懂的原則，參考了網上這種大神對BFC的html

解釋說明後，在這裏分享下本身所理解的BFC，但願對初學者們有些幫助。ide

　　那麼什麼是BFC？佈局

　　首先，咱們須要知道BFC爲Block Formatting Context縮寫，中文解釋爲塊級格式化上下文。spa

　　其次，咱們也須要明白BFC不是HTML/CSS裏的一個標籤元素屬性這類，它是一個環境，是一個獨立的渲染區域，它規定了內部的塊級別的BOX如何佈局，且BFC內和BFC外各不相干。code

　　最後，須要條件觸發才能生成BFC環境。那麼問題又來了，哪些元素會觸發生成BFC呢？orm

　　　　1.根元素。htm

　　　　2.當Float屬性不爲none時。blog

　　　　3.position爲absolute或fixed文檔

　　　　4.overflow不爲visible

　　看到這裏，確定一大半人也還沒能明白，那咱們先來看個示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

View Code

　　上面這段代碼是很常見的，一個div裏面嵌套兩個div，顯示結果就是兩個div錘子排列。當咱們須要兩個div水平排列時候，咱們經常會將div1和div2進行一個浮動。加入以下代碼　　

　.div1,.div2{

　　　　　　　　float:left;
　　　　　　}

　　這時候兩個div便會水平排列。可是這時候你會發現本來包含在一個div裏面的兩個div已是獨自成塊了，沒有一個父級元素了，且浮動後的div還會影響到周圍其餘的佈局。這時候

咱們就須要用到BFC環境了，咱們經常會利用overflow元素的hidden屬性來觸發BFC。

.div1,.div2{
             overflow:hidden;
           }

　　加入上述代碼後，本來浮動後脫離文檔流的兩個div如今又重新回到 .father 的懷抱了。

　　利用overflow：hidden來觸發BFC是博主經常用到的。

　　今天暫且分享這個經常會遇到的問題，其實BFC做用的地方也還挺多的，其餘的待咱們下次再詳談。

　　若有對BFC瞭解更爲全面的，歡迎給博主指正。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。