外邊距合并及破解方法
- 同一個(gè)BFC中常規(guī)文檔流的兩個(gè)在垂直方向“相鄰”的塊級(jí)盒子會(huì)出現(xiàn)外邊距合并扣蜻。
- 兩個(gè)外邊距都是正數(shù)時(shí)取其中最大的那個(gè)作為外邊距；一正一負(fù)時(shí)則相加作為之間的外邊距及塘；都是負(fù)數(shù)時(shí)取其中絕對(duì)值較大的作為之間的外邊距莽使。
- 創(chuàng)建新的BFC、脫離文檔流笙僚、用bordr/padding將其分隔開芳肌。
去除inline-block內(nèi)縫隙的幾種常見方法
- 相鄰的標(biāo)簽不要有空格，可以把結(jié)束符放在下一行標(biāo)簽的前面肋层；
- 使用負(fù)margin亿笤，一般是margin: -4px;
- 父容器設(shè)置font-size: 0，并重新設(shè)置子元素字體撐開高度槽驶；
- 也可以用浮動(dòng)代替inline-block责嚷，注意清除浮動(dòng)。
父容器使用overflow: auto| hidden撐開高度的原理
- 原本因浮動(dòng)或定位導(dǎo)致的子元素與父容器不在同一個(gè)維度掂铐，因?yàn)槭褂?code>overflow: auto| hidden后罕拂，父容器就形成了一個(gè)新的BFC，里面的布局不會(huì)受到外面元素的影響全陨，BFC內(nèi)的元素重新按順序一個(gè)個(gè)排列爆班，撐開高度。
BFC的形成及其作用
- BFC是塊級(jí)格式上下文辱姨，是一個(gè)獨(dú)立的布局區(qū)間柿菩，其內(nèi)部的元素排列不受外部元素影響。
- 浮動(dòng)雨涛、絕對(duì)定位枢舶、非塊級(jí)盒子的塊級(jí)容器（inline-block、table cell替久、table caption）以及overflow值不為visible的塊級(jí)盒子都可以形成BFC凉泄。
- 形成BFC就形成了一個(gè)獨(dú)立的區(qū)間，不會(huì)受外部元素的影響蚯根；可以用來清除浮動(dòng)造成的不良影響后众、去除外邊距折疊。
浮動(dòng)導(dǎo)致的父容器高度塌陷的原理及解決方法
- 指的是因?yàn)樽釉馗?dòng)颅拦，因而就脫離了文檔流蒂誉，未設(shè)置高度的父容器認(rèn)為子元素不存在，所以父容器高度會(huì)坍塌距帅，從而影響排版顯示右锨。
- ①在浮動(dòng)元素的后面加一個(gè)空元素并
clear:both，雖然父容器無法感知浮動(dòng)元素锥债，但是空元素能告訴他高度應(yīng)該撐到哪陡蝇，用空div或空內(nèi)容的：after都可以痊臭，注意display:block哮肚。
②可以用浮動(dòng)登夫、絕對(duì)定位、overflow：hidden/auto允趟、display：inline-block等創(chuàng)建新的BFC恼策，形成獨(dú)立布局空間，讓父元素感知浮動(dòng)的子元素潮剪。
用偽類去撐開父容器高度（消除浮動(dòng)影響）
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
- BFC是獨(dú)立布局空間涣楷，不受外部元素影響，重新感知浮動(dòng)的元素?fù)伍_空間抗碰；而空內(nèi)容的偽類是以clear作為媒介狮斗，感知到浮動(dòng)元素，再以自身為截止點(diǎn)讓父容器撐開高度弧蝇。
