目录边距重叠现象如何计算边距值:消除边距重叠: BFC布局规则如何触发BFC
大重叠现象
两个或多个块级框的垂直相邻边界匹配。
margin值的计算方法: a、均为正值,取最大值;
b、均不是正值,而是最大正值、最小负值
c、没有正值。 最小负值为零。
消除边距重叠:1.在重叠边距之间插入边框、填充;
2 .使用BFC是由页面上独立容器的特性触发BFC的。
BFC布局规则内部的Box沿垂直方向一个接一个地放置。 盒的垂直距离由margin决定。 属于同一BFC的两个相邻Box的margin重叠在每个元素的margin box左侧,并与包含块border box的左侧接触。 对于从左到右的格式,否则相反。 即使有浮动也是这样。 BFC的区域不与浮动盒重叠。 BFC是页面上隔离的独立容器,容器中的子元素不会影响到外面的元素反之亦然。 计算BFC的高度时,浮动元素也参与计算
*如何触发*http://www.Sina.com/BFC1 .根元素(html )
2 .浮动元素(元素的浮点不是none ) )。
3 .绝对位置元素(元素的位置为absolute或fixed ) )。
4.display为在线块、表蜂窝、表复制、表、表-行、表-行-组.表-头-组
5 .溢出值不可见的块元素
6.contain值为layout、content或paint的元素
7 .多列容器(元素的列计数或列宽度包括列计数为1,而不是自动) )。
参考文章:块级格式化上下文(BFC ) )
参考视频:引导您以最简单的方式了解最全面的BFC