BFC的外边距折叠

2018-06-24 01:05:56来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 问题描述
  在子元素里设置margin-bottom,该margin-bottom的值没有作用于子元素,而会”转移”给外层div,如下所示。
        <div style="background:red;">
            父元素的内容占据
            <div style="margin-bottom:20px;background:blue;">
             子元素的内容占据占据   
            </div>
        </div>
        <div style="background:yellow">
            这是下一行的内容
        </div>

  效果如图:

  为什么会产生这种现象呢,究其根本乃是因为BFC的外边距折叠,什么是外边距折叠呢。
 
BFC的外边距折叠
  两个相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以合并成一个单独的外边距。这种合并外边距的方式被称为折叠。
什么情况下会引起外边距折叠。
触发条件:
  必须是处于常规文档流的块级盒子,并且处于同一个BFC中。
  没有将他们分开的东西,如padding、border、clearance。
  在垂直方向上是相邻的,相邻的情况有以下几种
    1、元素的margin-top与其第一个处于常规文档流中的子元素的margin-top
    2、高度自动的元素的margin-bottom与其最后一个处于常规文档流中子元素的margin-bottom
    3、元素的margin-bottom与其下一个处于常规文档流转红的兄弟元素的margin-top
    4、元素的margin-top与其margin-bottom,但需满足自身没创建BFC、min-height为0、不包含正常文档流的子元素、高度为0或者auto。
解决方法:
  要避免这个问题,可以让触发条件不成立,从而解决问题,所以有以下几种解决方法
   1、给父元素加高度或者设置padding值,将他们分开。
   2:把父元素变成一个 block formating context ,也就是新建一个BFC,根据BFC的定义,下面是可选的方法
    a、float: left/right
    b、position: absolute
    c、display: inline-block/table-cell
    d、overflow: hidden/auto
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:background相关属性

下一篇:CSS效果:CSS改变下拉列表select框的默认样式