BFC:
边距重叠解决方案 BFC(块级格式化上下文):
一. BFC的原理:
内部的box会在垂直方向,一个接一个的放置
box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的 margin会发生重叠
bfc的区域不会与浮动区域的box重叠
bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也 不会影响外面的
二.创建BFC:
float属性不为none(脱离文档流)
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
三.应用场景:
自适应两栏布局、清除浮动、防止垂直margin重叠
1. 相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有 上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是 取两个值中的 较大者这种现象被称为相邻块元素垂直外边距的合并 。
解决方案:
尽量只给一个盒子添加 margin 值。
2. 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。 使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。
解决方案:
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。