成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

重新定義BFC

harryhappy / 3112人閱讀

摘要：大家花秒的時(shí)間組織組織語(yǔ)言，給下個(gè)定義，看看咱們的想法是不是一致的，哈哈。

先給BFC下個(gè)定義

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

我給BFC下的定義是：BFC就是把因?yàn)槟承┣闆r下（比如脫離文檔流），block元素被破壞的特性，恢復(fù)回來(lái)

按照上面的定義，我舉幾個(gè)例子來(lái)說(shuō)明一下

高度塌陷問(wèn)題

現(xiàn)象比較簡(jiǎn)單，子元素float：left，父元素的高度就塌陷了。這就是因?yàn)樽釉氐?b>float導(dǎo)致父元素block特性：高度變沒(méi)了，按正常的block元素的特性，父元素的高度應(yīng)該和子元素高度是一致的（這句說(shuō)的不嚴(yán)謹(jǐn)，不過(guò)為了說(shuō)明重點(diǎn)，這里不詳細(xì)說(shuō)明父元素的高度），現(xiàn)在很明顯不是。

現(xiàn)在BFC上場(chǎng)了，為了把父元素的高度特性找回來(lái)，讓他的高度和子元素相同，我們根據(jù)BFC的觸發(fā)條件，給父元素增加overflow:hidden或display:inline-block，結(jié)果就是這樣：

margin塌陷問(wèn)題

margin塌陷我們也經(jīng)常遇到，效果如下：

題外：這是w3c的規(guī)定：兩個(gè)盒子垂直排列時(shí)，取較大的margin。這個(gè)不應(yīng)該算是問(wèn)題，但是和我們排版的習(xí)慣相背，所以我們還得解決。

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

左右自適應(yīng)布局

我們先看一個(gè)常見(jiàn)的現(xiàn)象：

那現(xiàn)在問(wèn)題來(lái)了，一個(gè)有獨(dú)立人格的div，是不能容忍自己被其他div搶風(fēng)頭的，雖然那個(gè)小的脫離的文檔流。現(xiàn)在又該輪到BFC出場(chǎng)了，我們把大的div設(shè)置overflow:hidden或display:inline-block，就會(huì)有下面的效果：

這里我們稍加改造，再次發(fā)揮BFC的能量。我們?cè)O(shè)置右側(cè)DIV的樣式：width：auto，效果就是這樣：

此效果的代碼：




    
float：left

    
我是自適應(yīng)的




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;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112380.html

相關(guān)文章

  • 【CSS基礎(chǔ)】CSS常見(jiàn)概念

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

    hsluoyz 評(píng)論0 收藏0

  • 深入清除浮動(dòng)原理

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

    freewolf 評(píng)論0 收藏0

  • 深入理解BFC

    摘要：最常見(jiàn)的有簡(jiǎn)稱和簡(jiǎn)稱。計(jì)算的高度時(shí)，浮動(dòng)元素也參與計(jì)算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵?shí)有很多，在元素中添加或者使其父元素形成一個(gè)也可以在元素中添加或是這些都可以有效解決父子元素重疊問(wèn)題。解決這個(gè)問(wèn)題，只需要把把父元素變成一個(gè)就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，...

    legendmohe 評(píng)論0 收藏0

  • 深入理解BFC

    摘要：最常見(jiàn)的有簡(jiǎn)稱和簡(jiǎn)稱。計(jì)算的高度時(shí)，浮動(dòng)元素也參與計(jì)算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵?shí)有很多，在元素中添加或者使其父元素形成一個(gè)也可以在元素中添加或是這些都可以有效解決父子元素重疊問(wèn)題。解決這個(gè)問(wèn)題，只需要把把父元素變成一個(gè)就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，...

    testHs 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<