大家好，我是IT修真院郑州分院第七期的学员冯亚超，一枚正直纯洁善良的WEB程序员 今天给大家分享一下，margin负值在页面布局中有哪些应用？
一、背景介绍
什么是BFC?
Block Formatting Context，中文直译为块级格式上下文。
BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。 两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。
这里也间接指出了垂直相邻盒子margin合并的解决办法：就是给这两个盒子也创建BFC。
BFC的特点就是,内部和外部相互独立,互不影响
二、知识剖析
BFC布局规则
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、 BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算
三、常见问题
有哪些方式能够触发BFC模式呢？
BFC有哪些应用？
四、解决方案
有哪些方式能够触发BFC模式呢？
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-blcok、table-cell、table-caption、flex、inline-flex
5、overflow不为visible
BFC有哪些应用？
1. 清除内部浮动
我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。
2. 垂直MARGIN合并
在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠的结果：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个外边距一正一负时，折叠结果是两者的相加的和。这个同样可以利用BFC解决。
3. 创建自适应两栏布局
在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。
如何创建BFC
float属性不为none
overflow不为visible(可以是hidden、scroll、auto)
position为absolute或fixed
display为inline-block、table-cell、table-caption
五、编码实战
六、拓展思考
BLOCK FORMATTING CONTEXT在产生什么作用
1.Block Formatting Context可以阻止边距折叠（margin collapsing）。
2.Block Formatting Context可以包含内部元素的浮动。
七、参考文献
http://caibaojian.com/bfc.html
八、更多讨论
BFC还有哪些应用?
Q1:提问人:王栋
问题:在什么情况下会用到BFC?
A1:回答人:冯亚超
回答:1.主要根据BFC的几个有点来应用:清除内部浮动;避免margin重叠和两栏布局.其实这几个特点都是基于BFC的属性:内部和外部互不影响的特点来应用的,记住这一点才能更好的应用BFC布局.
Q2:提问人:王栋
问题:bfc使用的时候注意什么问题？
A2:回答人:冯亚超
回答:主要是当某个元素应用的margin的时候,要注意使用BFC,因为BFC有个特点是两个相邻的margin相加,这样的话可能就会破坏margin负值产生的效果.
Q3:提问人:王栋
问题:什么是ifc？
A3:回答人:冯亚超
回答:IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响),IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
感谢大家观看！
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
获得更多IT技能，请移步官网 点击链接直达：http://www.jnshu.com/login/1/17884272
