文章版權(quán)歸饑人谷_Lyndon以及饑人谷所有。
1. 浮動(dòng)元素有什么特征御滩？對(duì)父容器鸥拧、其他浮動(dòng)元素、普通元素艾恼、文字分別有什么影響住涉？
特征：浮動(dòng)元素的框可以向左或者向右移動(dòng)，直到它的外邊緣碰到父元素包含框或者另一個(gè)浮動(dòng)元素的邊框?yàn)橹鼓粕埽桓?dòng)元素不在文檔普通流之中舆声，因此文檔普通流中的塊級(jí)元素感知不到浮動(dòng)元素的存在。
對(duì)父容器的影響：浮動(dòng)元素脫離文檔流向左或者向右移動(dòng)柳爽，直到邊框碰到父元素的邊緣媳握。
對(duì)其他浮動(dòng)元素的影響：浮動(dòng)元素都向某個(gè)方向移動(dòng)，直到其邊框碰到其他元素的邊框磷脯，如果包含框太窄蛾找，無法容納多個(gè)浮動(dòng)元素，那么其浮動(dòng)元素向下移動(dòng)赵誓，直到擁有足夠的空間打毛，如果浮動(dòng)元素的高度不同柿赊，那么它們向下移動(dòng)時(shí)可能被其他浮動(dòng)元素卡住。
浮動(dòng)元素一個(gè)挨著一個(gè)
無法被一行容納的浮動(dòng)元素向下移動(dòng)
框3被框1卡住了
對(duì)普通元素的影響：沒有什么影響幻枉，普通元素感知不到浮動(dòng)元素的存在碰声。但是普通元素的文字會(huì)受到影響。
普通元素感知不到浮動(dòng)元素的存在
普通元素的文字受到影響
對(duì)文字的影響：浮動(dòng)元素旁邊的文字框被縮短熬甫，從而給浮動(dòng)元素留出空間胰挑，文字框圍繞浮動(dòng)元素。
若希望圍繞行框阻止浮動(dòng)框椿肩，需要使用clear屬性瞻颂。
2. 清除浮動(dòng)指什么? 如何清除浮動(dòng)?
清除浮動(dòng)：清除浮動(dòng)指的是運(yùn)用clear屬性去解決浮動(dòng)父容器高度塌陷的問題，clear屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素郑象。
可選擇的值有：left, right, both, none, inherit
清除浮動(dòng)方法1：在最后添加一個(gè)空div贡这，對(duì)它進(jìn)行清理，缺點(diǎn)是增加了一個(gè)無意義標(biāo)簽扣唱。
清除浮動(dòng)方法2：BFC（Block Format Content）清理浮動(dòng)藕坯，BFC可以阻止垂直外邊距折疊团南、不會(huì)重疊浮動(dòng)元素噪沙、可以包含浮動(dòng)。因此清理浮動(dòng)在BFC的語境下就是“包含浮動(dòng)”吐根，也即讓父容器形成BFC就可以正歼。
3. BFC 是什么？如何生成 BFC拷橘？BFC 有什么作用局义？
- 在了解BFC之前，需要先了解：box, formatting context的概念冗疮。
Box：CSS布局的基本單位
一個(gè)頁面由很多Box組成萄唇，元素的類型和display屬性決定這個(gè)Box的類型，不同類型的Box會(huì)參與不同的Formatting Context术幔，Box內(nèi)的元素會(huì)以不同方式進(jìn)行渲染另萤。主要的Box有以下幾種：
塊級(jí)元素 block-level box: display屬性為block, list-item, table的元素，會(huì)生成block-level box诅挑，并且參與block formatting context
行內(nèi)元素 inline-level box: display屬性為inline, inline-block, inline-table的元素四敞，會(huì)生成inline-level box，并且參與inline formatting context
run-in box拔妥，還沒有涉及到忿危。
formatting context：W3C CSS2.1規(guī)范中的概念
它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則没龙，它決定其子元素如何定位铺厨、和其他元素之間的關(guān)系與相互作用缎玫。常見的formatting context有BFC（Block formatting context）和IFC（Inline formatting context）。之后在CSS3中還加入了GFC和FFC解滓。
BFC
BFC全稱：Block Formatting Context碘梢，中文可以翻譯為：“塊級(jí)格式化上下文”，它是一個(gè)獨(dú)立的渲染區(qū)域伐蒂，只有block-level box參與煞躬，它規(guī)定內(nèi)部的block-level box如何布局，并且與這個(gè)區(qū)域外部毫不相干逸邦。BFC布局規(guī)則
- 內(nèi)部的box會(huì)在垂直方向一個(gè)接一個(gè)地放置恩沛；
- box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊缕减；
- 每個(gè)元素margin box左邊雷客，與包含塊border box的左邊相接觸（對(duì)于從左向右的格式化，否則相反）桥狡，即使存在浮動(dòng)也是如此搅裙；
- BFC的區(qū)域不會(huì)與float box重疊；
- BFC是頁面上的一個(gè)隔離的獨(dú)立容器裹芝，容器里面的子元素不會(huì)影響到外面的元素部逮；
- 計(jì)算BFC高度時(shí)，浮動(dòng)元素也參與計(jì)算嫂易。
- 生成BFC
- 根元素
- float屬性不為none
- position為absolute或者fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
- BFC的應(yīng)用場(chǎng)景舉例
- 自適應(yīng)兩欄布局：正常情況下布局如下
根據(jù)BFC的規(guī)則——“每個(gè)元素的margin box左邊與包含塊border box的左邊向接觸兄朋，即使存在浮動(dòng)也是如此”。因此雖然存在浮動(dòng)元素aside怜械，但是main的左邊依然會(huì)與包含塊的左邊接觸颅和。
另外，根據(jù)BFC布局規(guī)則第四條——“BFC的區(qū)域不會(huì)與float box重疊”缕允。因此可以通過將main生成BFC峡扩，來實(shí)現(xiàn)自適應(yīng)兩欄布局。
這一布局會(huì)根據(jù)塊的寬度障本、aside的寬度自動(dòng)調(diào)整寬窄教届。
- 清除內(nèi)部浮動(dòng)：正常情況下布局如下
根據(jù)BFC的規(guī)則——“計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算”彼绷。為了清除內(nèi)部浮動(dòng)巍佑，可以將par設(shè)置為bfc，在計(jì)算par高度時(shí)寄悯，par內(nèi)部的浮動(dòng)元素child也會(huì)參與計(jì)算萤衰。
- 防止垂直margin重疊：正常情況下布局如下
兩個(gè)p元素之間的距離為50px，發(fā)生了margin重疊猜旬。根據(jù)BFC規(guī)則——“Box垂直方向的距離由margin決定脆栋，屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊”倦卖。因此可以在p外面包裹一個(gè)容器，將其設(shè)置為另一個(gè)BFC椿争，那么兩個(gè)p元素就不再屬于同一個(gè)BFC怕膛，不會(huì)發(fā)生margin重疊。
- 總結(jié)
以上例子都體現(xiàn)了BFC布局規(guī)則的“BFC其實(shí)就是頁面上一個(gè)隔離的獨(dú)立容器秦踪，容器里面的子元素不會(huì)影響到外面的元素褐捻，反之亦然∫蔚耍”
所以柠逞，學(xué)習(xí)BFC并不難，只需要牢記規(guī)則景馁，不確定的時(shí)候板壮，在jsbin上試一試就可以了，但是需要在實(shí)踐中掌握原理合住。我認(rèn)為無論是自適應(yīng)兩欄布局绰精，還是清除內(nèi)部浮動(dòng)，還是防止margin重疊透葛，其實(shí)原理無外乎是這樣的：當(dāng)BFC外部存在浮動(dòng)時(shí)笨使，因?yàn)樗挥绊態(tài)FC內(nèi)部box布局，所以BFC會(huì)自己變窄获洲，不會(huì)與浮動(dòng)重疊阱表。當(dāng)BFC內(nèi)部有浮動(dòng)時(shí)殿如，為了不影響外部元素布局贡珊，BFC在計(jì)算高度時(shí)會(huì)包括浮動(dòng)元素的高度。同理涉馁，避免margin重疊時(shí)门岔，因?yàn)锽FC內(nèi)外互不影響，所以要避免margin重疊烤送，就將兩個(gè)box放在兩個(gè)BFC里面寒随。
4. 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并帮坚？如何不讓相鄰元素外邊距合并妻往？給個(gè)父子外邊距合并的范例
- 外邊距合并的場(chǎng)景：在CSS中，兩個(gè)或者多個(gè)毗鄰普通流上的塊級(jí)元素垂直方向上的margin會(huì)發(fā)生疊加试和。
- 合并示例：
如圖所示讯泣，.box1和.box2的margin設(shè)置為20px，.box3的margin設(shè)置為30px阅悍，但是實(shí)際上三者之間的距離為：20px, 30px好渠，發(fā)生合并昨稼。
- 不讓相鄰元素外邊距合并：建立BFC來避免垂直margin合并
如圖所示，將.box2包裹在div中拳锚，建立一個(gè)BFC
- 父子邊距合并：
可以看出：.father隨著.son向下走了30px假栓，而.son相對(duì).father的位置沒有變化，因?yàn)楦缸釉氐膍argin-top合并了霍掺，文檔流內(nèi)塊級(jí)元素的top與bottom邊距有時(shí)會(huì)合并（塌陷）為單個(gè)外邊距（合并后最大的外邊距）匾荆，這樣的現(xiàn)象稱為外邊距塌陷。
- 父子邊距合并的解決方法：給父元素添加邊框杆烁、內(nèi)邊距棋凳、內(nèi)容作為分界線，或者讓父元素形成BFC
