css布局--浮动带来的问题(塌陷)及解决办法，以及maigin重叠防止及使用;常见的概念:FC、BFC

浮动问题：是元素脱离文档流；父元素不能被子元素撑起。

办法一：父元素添加.father{ overflow:hidden;zoom:1;}

办法二：父元素添加伪类.father:after{content:'',display:block;clear:both;}

办法三：给浮动元素随后边添加一个空元素，然后清楚浮动 clear:both

margin重叠(垂直方向mrgin会以大的为准则，元素浮动则不会出现margin塌陷)

情景：

<style>
.father{
   background-color:#d2d2d2;

}
  .son{
    width:100px;
    height100p;margin-top:20px;
}
</style>
<div class="father">
   <div class="son"></div>
</div>

发现父元素也被margin-top:20px;

办法一：.father:{overflow:hidden}

办法二：.father{padding-top:1px;}

方法三：.father{border-top:1px solid transparent;}

注：根据不同浏览器，情况也不尽相同。

前端布局中常见的概念：

FC：formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，他决定了子元素

如何定位，以及与其他元素的相互关系与作用。

BFC：Block Formatting Context，块及元素格式化上下文。一个独立的块及元素渲染区域，拥有一套渲染规则来约束

块及盒子的布局，且与外部元素无法，

BFC产生的条件：

1.float的值不为none

2.display的值为inline-block、table-cell、table-caption

3.position的值为absolute或fix

4.html根元素。

BFC约束规则：

1.两个响铃的子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块元素外边距会折叠，

同属一个BFC的两个相邻Box的Boxmargin会发生重叠。

2.生成两个BFC元素的子元素中，每一个元素左外边距与包含块的左边界接触，即使浮动元素也是如此。

3.BFC的区域不会与float的元素区域重叠

4.计算BFC高度时，浮动元素也参与计算。

5.BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

css常见的一些问题都可以由上面两条推出，例如：

1.Block元素与父元素同宽，所以Block元素竖直方向上垂直排列。

2.竖直方向上有的Block元素margin会重叠，水平方向不会。

3.浮动元素会尽量接近左上方或右上方。

4.为父元素设置overflow:hidden或浮动父元素，则父元素会包含其浮动的子元素。