摘要:的概念以及作用的概念以及作用的定義的定義直譯為塊級格式化上下文。是的首字母縮寫,直譯過來是格式化上下文,它是頁面中的一塊渲染區(qū)域,有一套渲染規(guī)則,決定了其子元素如何布局,以及和其他元素之間的關(guān)系和作用。
(Block formatting context)
直譯為"塊級格式化上下文"
。它是一個獨立的渲染區(qū)域,只有Block-level box參與, 它規(guī)定了內(nèi)部的Block-level Box如何布局,并且與這個區(qū)域外部毫不相干。我們常說的文檔流其實分為==定位流、浮動流和普通流==三種。而
普通流
其實就是指BFC中的FC。
FC
是formatting context
的首字母縮寫,直譯過來是格式化上下文,它是頁面中的一塊渲染區(qū)域,有一套渲染規(guī)則,決定了其子元素如何布局,以及和其他元素之間的關(guān)系和作用。
通俗一點的方式解釋:
BFC 可以簡單的理解為某個元素的一個 CSS 屬性,只不過這個屬性不能被開發(fā)者顯式的修改,擁有這個屬性的元素對內(nèi)部元素和外部元素會表現(xiàn)出一些特性,這就是BFC。
==滿足下列條件之一就可觸發(fā)BFC==
- 【1】根元素,即HTML元素
【5】position的值為absolute或fixed
- 1.內(nèi)部的Box會在垂直方向,一個接一個地放置。
6.計算BFC的高度時,浮動元素也參與計算
我們平常說的盒子是由margin、border、padding、content組成的,實際上每種類型的四條邊定義了一個盒子,分別是分別是content box、padding box、border box、margin box,這四種類型的盒子一直存在,即使他們的值為0.決定塊盒在包含塊中與相鄰塊盒的垂直間距的便是margin-box。
決定塊盒在包含塊中與相鄰塊盒的垂直間距的便是margin-box
//給這兩個子div加浮動,浮動的結(jié)果,如果沒有清除浮動的話,父div不會將下面兩個div包裹,但還是在父div的范圍之內(nèi)。
解析:給這兩個子div加浮動,浮動的結(jié)果,如果沒有清除浮動的話,父div不會將下面兩個div包裹,但還是在父div的范圍之內(nèi),左浮是子div的左邊接觸父div的borderbox的左邊,右浮是子div接觸父div的borderbox右邊,除非設(shè)置margin來撐開距離,否則一直是這個規(guī)則。
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
overflow: hidden;//觸發(fā)main盒子的BFC
background: #fcc;
}
.text{
width: 500px;
}
上面aside盒子有一個浮動屬性,覆蓋了main盒子的內(nèi)容,main盒子沒有清除aside盒子的浮動。只做了一個動作,就是觸發(fā)自身的BFC,然后就不再被aside盒子覆蓋了。所以:BFC的區(qū)域不會與float box重疊。
- 1.自適應(yīng)兩欄布局
4.分屬于不同的BFC時可以阻止margin重疊
還是上面的代碼,此時BFC的區(qū)域不會與float box重疊,因此會根據(jù)包含塊(父div)的寬度,和aside的寬度,自適應(yīng)寬度。
IE 作為瀏覽器中的奇葩,當(dāng)然不可能按部就班的支持 BFC 標(biāo)準(zhǔn),于是乎 IE 中有了 Layout 這個東西。Layout 和 BFC 基本是等價的,為了處理 IE 的兼容性,在需要觸發(fā) BFC 時,我們除了需要用觸發(fā)條件中的 CSS 屬性來觸發(fā) BFC,還需要針對 IE 瀏覽器使用 zoom: 1 來觸發(fā) IE 瀏覽器的 Layout。
.parent {
margin-top: 3rem;
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
給父divparent加上 overflow: hidden;
清除浮動原理:觸發(fā)父div的BFC屬性,使下面的子div都處在父div的同一個BFC區(qū)域之內(nèi),此時已成功清除浮動.
還可以向同一個方向浮動來達(dá)到清除浮動的目的,清除浮動的原理是兩個div都位于同一個浮動的BFC區(qū)域之中
當(dāng)兩個相鄰塊級子元素分屬于不同的BFC時可以阻止margin重疊
操作方法:給其中一個div外面包一個div,然后通過觸發(fā)外面這個div的BFC,就可以阻止這兩個div的margin重疊
.aside {
margin-bottom: 100px;//margin屬性
width: 100px;
height: 150px;
background: #f66;
}
.main {
margin-top: 100px;//margin屬性
height: 200px;
background: #fcc;
}
.text{
/*盒子main的外面包一個div,通過改變此div的屬性使兩個盒子分屬于兩個不同的BFC,以此來阻止margin重疊*/
overflow: hidden;//此時已經(jīng)觸發(fā)了BFC屬性。
}
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/1955.html
摘要:最常見的有簡稱和簡稱。的區(qū)域不會與重疊。也就是說只要父容器形成就可以,觸發(fā)方式見上清除浮動比較好的方法以上用,用更好的方法自適應(yīng)布局觸發(fā)自適應(yīng)屬性對比參考資料張鑫旭老師的博客 本文是從之前的csdn上的亂七八糟的筆記整理過來的 概念 Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域,并且有一套渲染規(guī)則,它決定了其子元素將如何...
摘要:它是頁面中的一塊渲染區(qū)域,并且有一套渲染規(guī)則,它決定了其子元素將如何定位,以及和其他元素的關(guān)系和相互作用。一個的范圍包含創(chuàng)建該上下文元素的所有子元素,但不包括創(chuàng)建了新的子元素的內(nèi)部元素。 走在前端的大道上 本篇將自己讀過的相關(guān) 盒模型BFC 文章中,對自己有啟發(fā)的章節(jié)片段總結(jié)在這(會對原文進(jìn)行刪改),會不斷豐富提煉總結(jié)更新。 一.常見定位方案 在講 BFC 之前,我們先來了解一下常見的...
閱讀 1317·2021-10-27 14:14
閱讀 3574·2021-09-29 09:34
閱讀 2477·2019-08-30 15:44
閱讀 1715·2019-08-29 17:13
閱讀 2569·2019-08-29 13:07
閱讀 867·2019-08-26 18:26
閱讀 3342·2019-08-26 13:44
閱讀 3210·2019-08-26 13:37