国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

塊級(jí)格式化上下文(BFC)

TerryCai / 2559人閱讀

摘要：可以阻止元素被浮動(dòng)元素覆蓋浮動(dòng)元素的塊級(jí)兄弟元素會(huì)無(wú)視浮動(dòng)元素的位置，盡量占滿一整行，這樣就會(huì)被浮動(dòng)元素覆蓋，為該兄弟元素觸發(fā)后可以阻止這種情況的發(fā)生。

一、什么是BFC

具有BFC屬性的元素也屬于普通流定位方式，與普通容器沒(méi)有什么區(qū)別，但是在功能上，具有BFC的元素可以看做是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且具有普通容器沒(méi)有的一些特性，比如包含浮動(dòng)元素，以防止出現(xiàn)高度塌陷問(wèn)題。

總之，BFC就是一種屬性，這種屬性會(huì)影響著元素的定位及與其兄弟元素之間的相互作用。

二、BFC的用途

從整體上看，BFC是隔離了的容器：

1、BFC會(huì)阻止外邊距折疊

折疊：兩個(gè)相鄰的盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的垂直外邊距可以合并成一個(gè)多帶帶的垂直外邊距。這種合并外邊距的方式被稱為折疊。

在同一個(gè)BFC中，兩個(gè)相鄰的塊級(jí)元素在垂直方向上的外邊距會(huì)發(fā)生疊加，具體的疊加規(guī)則如下：

當(dāng)兩個(gè)塊級(jí)元素的外邊距都為正數(shù)時(shí)，取較大者

當(dāng)兩個(gè)塊級(jí)元素的外邊距都為負(fù)數(shù)時(shí)，取較大者

當(dāng)一正一負(fù)時(shí)，為兩者的和

根據(jù)上面的定義可知，發(fā)生折疊的條件是：兩個(gè)塊級(jí)元素位于同一個(gè)BFC中，因而要阻止外邊距折疊只需要產(chǎn)生新的BFC。

創(chuàng)建了BFC的元素，不和它的子元素發(fā)生外邊距折疊。 因而如果同一級(jí)中的塊級(jí)元素發(fā)生折疊情況(兄弟關(guān)系)，不能在元素本身上產(chǎn)生BFC屬性，而應(yīng)該給任意一個(gè)元素新建一個(gè)BFC容器(新增父級(jí)元素并設(shè)置為新的BFC，例如設(shè)置overflow:hidden;)。如果是祖先關(guān)系，則只需要觸發(fā)父級(jí)BFC。

A、兄弟關(guān)系外邊距折疊



  


  

    
  


  



/*兄弟關(guān)系阻止折疊方法*/

B、祖先關(guān)系折疊

2、BFC可以包含浮動(dòng)元素

未給child加float屬性前：

給child加float屬性后：

從上面兩個(gè)對(duì)比圖可以發(fā)現(xiàn)，加了float屬性后，包含child類的div脫離普通/標(biāo)準(zhǔn)文檔流，外層div高度塌陷。

觸發(fā)BFC

使用overflow: hidden;觸發(fā)BFC屬性，就可以承載具有float屬性的元素了。

3、BFC可以阻止元素被浮動(dòng)元素覆蓋

浮動(dòng)元素的塊級(jí)兄弟元素會(huì)無(wú)視浮動(dòng)元素的位置，盡量占滿一整行，這樣就會(huì)被浮動(dòng)元素覆蓋，為該兄弟元素觸發(fā)BFC后可以阻止這種情況的發(fā)生。經(jīng)常在布局中使用。





  
222
222
222
222
222
222

  
222
222
222
222
222
222

  
222
222
222
222
222
222

觸發(fā)BFC




  
222
222
222
222
222
222

  
222
222
222
222
222
222

  
222
222
222
222
222
222

三、如何觸發(fā)BFC

浮動(dòng)元素：float除none以外的值

絕對(duì)定位元素：position(absolute、fixed)

display為以下其中之一的值inline-block、flex、inline-flex、table-cell、table-caption

overflow除了visible以外的值(hidden、auto、scroll)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113276.html

相關(guān)文章

  • 20170601-BFC(塊級(jí)格式化上下文)

    摘要：的全稱是塊級(jí)格式化上下文。浮動(dòng)絕對(duì)定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級(jí)元素會(huì)在其內(nèi)部建立新的塊級(jí)格式化上下文。使用可以解決以下問(wèn)題父子元素的上下合并問(wèn)題文字圍繞浮動(dòng)元素的問(wèn)題和子元素浮動(dòng)導(dǎo)致父元素高度為的問(wèn)題。 BFC BFC的全稱是Block Format Content -- 塊級(jí)格式化上下文。浮動(dòng)、絕對(duì)定位的元素(absolute、fixed定位)、塊容器(...

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

  • 20170601-BFC(塊級(jí)格式化上下文)

    摘要：的全稱是塊級(jí)格式化上下文。浮動(dòng)絕對(duì)定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級(jí)元素會(huì)在其內(nèi)部建立新的塊級(jí)格式化上下文。使用可以解決以下問(wèn)題父子元素的上下合并問(wèn)題文字圍繞浮動(dòng)元素的問(wèn)題和子元素浮動(dòng)導(dǎo)致父元素高度為的問(wèn)題。 BFC BFC的全稱是Block Format Content -- 塊級(jí)格式化上下文。浮動(dòng)、絕對(duì)定位的元素(absolute、fixed定位)、塊容器(...

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

  • 視覺(jué)格式化模型之BFC

    摘要：詳見(jiàn)權(quán)威指南塊級(jí)元素即塊級(jí)元素是源文檔中被格式化為塊的元素，或者屬性為的元素。概念顧名思義塊級(jí)格式化上下文。每個(gè)元素的的左邊，與包含塊的左邊相接觸對(duì)于從左往右的格式化，否則相反。 情景：浮動(dòng)的高度塌陷時(shí)，使用overflow：hidden可使父元素將浮動(dòng)的子元素包含起來(lái)，解決問(wèn)題。但背后的原理是什么？這就是今天要談的BFC。 在將BFC之前需要先了解幾個(gè)概念： 盒子模型（Box mo...

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

  • BFC原理詳解

    摘要：最常見(jiàn)的有簡(jiǎn)稱和簡(jiǎn)稱。可以把它理解成是一個(gè)獨(dú)立的容器，并且這個(gè)容器的里的布局，與這個(gè)容器外的毫不相干。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應(yīng)布局布局 一.BFC是什么 在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

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

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...

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

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

0條評(píng)論

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