重新定義BFC

harryhappy 發布于2019-08-29 13:07 / 3096人閱讀

摘要：大家花秒的時間組織組織語言，給下個定義，看看咱們的想法是不是一致的，哈哈。

先給BFC下個定義

CSS里的BFC可真的是一個老生長談的問題，網上的資料很多，介紹的也很詳細，但是看完之后，還是不知道BFC到底是個啥東西，似懂非懂，它到底是個標準呢，還是一套約定俗成的編碼規范呢，A和B兩個DIV，BFC化到底指的是A還是指的是B呢。大家花5秒的時間組織組織語言，給BFC下個定義，看看咱們的想法是不是一致的，哈哈。

我給BFC下的定義是：BFC就是把因為某些情況下（比如脫離文檔流），block元素被破壞的特性，恢復回來

按照上面的定義，我舉幾個例子來說明一下

高度塌陷問題

現象比較簡單，子元素float：left，父元素的高度就塌陷了。這就是因為子元素的float導致父元素block特性：高度變沒了，按正常的block元素的特性，父元素的高度應該和子元素高度是一致的（這句說的不嚴謹，不過為了說明重點，這里不詳細說明父元素的高度），現在很明顯不是。

現在BFC上場了，為了把父元素的高度特性找回來，讓他的高度和子元素相同，我們根據BFC的觸發條件，給父元素增加overflow:hidden或display:inline-block，結果就是這樣：

margin塌陷問題

margin塌陷我們也經常遇到，效果如下：

題外：這是w3c的規定：兩個盒子垂直排列時，取較大的margin。這個不應該算是問題，但是和我們排版的習慣相背，所以我們還得解決。

現在BFC又要出場了，這次是為了解決兩個div間隔相加的特性，這次我們把紅背景的元素增加display:inline-block，效果如下：

左右自適應布局

我們先看一個常見的現象：

那現在問題來了，一個有獨立人格的div，是不能容忍自己被其他div搶風頭的，雖然那個小的脫離的文檔流。現在又該輪到BFC出場了，我們把大的div設置overflow:hidden或display:inline-block，就會有下面的效果：

這里我們稍加改造，再次發揮BFC的能量。我們設置右側DIV的樣式：width：auto，效果就是這樣：

此效果的代碼：



    float：left
    我是自適應的


body {
    background-color:lightgray;
    padding:20px;
}
.inner {
    width:260px;
    height:50px;
    border-radius:5px;
    line-height:50px;
}
.left {
    width:100px;
    height:100px;
    background-color:rgba(0,255,0,0.5);
    float:left;
    
}
.right {
    width:auto;
    height:150px;
    background-color:rgba(255,0,0,0.5);
    overflow:hidden;
}

.wrap {
    border:1px solid black;
    padding:5px;
    border-radius:10px;
    overflow:hidden;
}

云服務器 GPU云服務器重新定義重新定義cdn webrtc重新定義通信 bfc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112380.html

【CSS基礎】CSS常見概念

摘要：在中主要通過四個部分來描述，分別為。對于元素，負值會完全覆蓋前一個元素，會影響后面元素一起移動對于元素，元素脫離了普通文檔流，對其他元素沒有影響對于元素，可以通過負值進行覆蓋，最常見的應用是三列布局。瀏覽器渲染過程不同的瀏覽器渲染過程實際上并不相同，但是依舊存在相一致的部分，大致過程如下所示：showImg(https://segmentfault.com/img/bVHJfZ?w...

hsluoyz 2019-08-30 14:07 評論0 收藏0
深入清除浮動原理

摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動了。下面詳細看一下這兩大類清除浮動的方式及原理。所以，避免穿透啊，清除浮動什么的也好理解了。關于浮動設置為浮動的元素會脫離當前文檔流，向左或向右移動直到邊緣遇到另一個浮動元素或者到達邊界。普通元素不會對齊造成影響。浮動是把雙刃劍，在給我們的布局帶來便利的同時有一些缺點需要我們去解決。例如最常見的父元素塌陷。如下圖所示：...

freewolf 2019-08-29 15:25 評論0 收藏0
深入理解BFC

摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們如何處理處理方法其實有很多，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。一、什么是BFC Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，...

legendmohe 2019-08-29 17:01 評論0 收藏0
深入理解BFC

摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們如何處理處理方法其實有很多，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。一、什么是BFC Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，...

testHs 2019-08-02 11:45 評論0 收藏0