2. 同级兄弟关系的重叠:
同级元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个
可通过添加空元素或伪类元素,设置overflow:hidden;解决margin重叠问题
2. 回答边距重叠—BFC
什么是BFC?
BFC就是“
块级格式化上下文
”的意思,BFC是一块独立的布局环境,保护其中内部元素不收外部影响,也不影响外部。本身BFC是一种css的布局方式,只是我们可以利用它来解决外边距折叠的问题,BFC并不是专门用来解决这个问题而创的;
如何触发BFC?
在box属性值为这些的情况下,都会让所属的box产生BFC。
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
也可以用排除法:
overflow的值不是visible;
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex
BFC的原理?(面试可不说,但要理解)
-
BFC内部的盒子,会在垂直方向,一个接一个地放置。垂直方向上也会发生边距重叠。
-
BFC就是页面上的一个独立容器,容器里面的子元素不会影响到外面的元素,外边的也不会影响里边的。
-
BFC的区域不会与float重叠。
-
计算BFC的高度时,浮动元素也被计算在内。
BFC的应用
1. 可以用来自适应布局
利用BFC的这一个原理就可以实现两栏布局,左边定宽,右边自适应。不会相互影响,哪怕高度不相等。
给right加overflow:hidden;使其变成BFC,消除外部left因浮动对他的影响
2. 可以清除浮动:
父元素加overflow:hidden/auto
,变BFC