margin塌陷/合并 BFC 浮动流

margin塌陷：存在父子关系的块级元素之间，在垂直方向上共用（谁的margin大用谁的）一个margin。

margin合并：存在兄弟关系的块级元素之间，在垂直方向上共用（谁的margin大用谁的）一个margin。（不会对开发造成太大影                           响，可以不去解决他）

 BFC：           Block Format Context  

   BFC的元素会改变一点点原来所应该遵循的语法规则。然后就能解决上述的margin塌陷/合并问题。

   设置块级元素的下列属性之一就会触发BFC：（至于具体用哪个去解决margin塌陷/合并问题，根据情况选择）

 position：absolute

display：inline-block

float：left/right

overflow：hidden

浮动：在子元素上加float：left/right属性就可以实现浮动。如果浮动元素不能一行展示，那么会自适应换行。

浮动元素产生了浮动流，所有产生浮动流的元素，块级元素看不到他们，产生了BFC的元素，文本类（inline-block）元素以             及文本都能看得见浮动元素。

浮动会带来的问题：父级元素是看不见浮动元素的块元素，子元素是浮动元素。那么父级元素就包裹不住子元素。

如何解决：

1.在子元素的最后再结构中添加一个p标签，然后在p标签中设置css属性：clear：both/left/right。（但是这样更改了html代码 不建议这样用）

2.给父级元素中的伪元素添加css属性clear：both/left/right来清除浮动流。必须是块级元素clear才能生效。

3.把父级元素变成BFC元素，这样它就能看得见子元素（浮动元素）了。