任务11-inline-block、BFC、边距合并

---

2016/5/31

---

1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

• 相邻的兄弟元素外边距合并，两个元素都在正常的文档流里面，父亲没有边框或者padding,那它们之间就会产生外边距合并。合并的结果就是二者的最大值

  
  0_1464364301975_upload-495d4d0b-cd27-46af-9c85-24b7d8960d04

• 父子元素外边距合并，合并的结果就是二者的最大值

  
  0_1464415667240_upload-9727c866-f71c-418d-8c35-f9d7ea28a8fc
• 总之，两个元素外边距之间没有存在边界线，没有任何阻挡就会出现外边距合并，（float和display:inlie-block比较特殊）甚至是它自身如果没有阻挡也会出现外边距的合并，边界线指的是border,padding,或者BFC

• 父子外边距合并的例子：

  
  0_1464416682232_upload-0f8ae183-9f97-4cb2-afc1-751d6b7e0962

• 1.给父级元素加border消除：

  
  0_1464416433085_upload-c2189e1b-d534-473e-9b07-da790f0c59c1

• 2. 给父级元素加padding消除:

     
     0_1464416585208_upload-aa934ab6-ae67-454e-a66b-3c803f1b8596

• 3. 加float属性

     
     0_1464422235641_upload-114ecba7-ea18-486f-b8f4-c50b535d100d

• 4. 加display:inline-block;

     
     0_1464422494931_upload-5c41f8cb-cbab-43fd-8673-fe22746393e4

• 5.形成BFC:

  
  0_1464423240691_upload-51a5e5fd-56f9-493c-8288-e07062bb9299

2.去除inline-block内缝隙有哪几种常见方法?

• 1. 直接去掉空白

     
     0_1464174383186_upload-99571ce2-a5fa-4a1d-b636-c8348ec8d863
     0_1464174517066_upload-62d77de7-b92f-4f70-af58-b8f179dd2f5b

• 2.加负margin值，一般为-4px，此方法会发生偏移，以及其他问题，一般不建议适用。

  
  0_1464174755015_upload-83c5b5c9-340c-47ad-ab73-8a5495d28987

• 3.给父元素添加overflow:auto,子元素添加float属性；

  
  0_1464173955966_upload-9f21af5f-af34-44ea-8a6d-e8021e7cbc39

• 4. 给父元素设置font-size:0,子元素加display:inline-block

     
     0_1464173884769_upload-b2f8299d-f1a5-4de0-b6ad-4b0b8babc1e2

3.父容器使用overflow: auto| hidden撑开高度的原理是什么？

父容器使用overflow: auto| hidden相当于给父容器定义为BFC,而BFC规定当这个父容器有子元素脱离文档流时，它会强制父元素将子元素包围起来，于是将高度撑开了。

4.BFC是什么？如何形成BFC，有什么作用?

• 父元素撑开，形成空间，形成独立的渲染效果。相当于形成一个盒子，盒子里面的元素不受盒子外面元素的影响，只受到盒子里面元素的影响。

  
  0_1464325985971_upload-4695ab16-3599-4570-89c7-b7340c667b2b

• 形成BFC的方法：
  1.给父级加display:inline-block;

  
  0_1464326214729_upload-f4575fb9-7cbd-4594-ab6e-84d902c968f5
  

  2.给父级加overflow:auto;或者overflow:hidden;

  
  0_1464326395960_upload-4d4421d4-2d3b-4d64-8ccb-31d939183c63
  3.给父级加float:left;
  0_1464326470445_upload-f2bfaac2-9338-4da4-a537-5b3ca81856cc

5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法

• 父容器无法支撑浮动元素，导致无法包裹浮动元素
• 解决方法：
• 1.给父级添加zoom:1

• 2。在父级下面加个空的相邻的子div,再clear:both清浮动

  
  0_1464333044435_upload-483cfaeb-e100-435a-9741-2aa5b1ed538e

• 3. 用伪元素，然后清浮动（改善语义化）

     
     0_1464334041451_upload-ba1ec581-d655-460f-9575-138fcc966eb0
• 4.形成BFC,清浮动，通过给父级元素加overflow:auto(hidden);display:inline-block;float:left;

6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

.clearfix:after{//声明一个伪类
content: ''; //添加空白元素
display: block;//将其设置为块级元素
clear: both;//清除两侧浮动
}
.clearfix{
*zoom: 1;//是为了兼容IE,csshack
}

代码