BFC内元素为absolute的元素问题

今天看一篇BFC的文章,并动手试了其中的规则,对一下这条不是很理解,求指导:
http://www.cnblogs.com/dojo-l...

clipboard.png

每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界

实际
html

<!-- BFC子元素不会超出包含他的元素,positon为absolute的子元素可以
        问题:对inner-1设置position:absolute,并没有超出父元素的边界?
     -->
    <section class="bfc-rules-wrap">
      <h3>2. 内部的元素不会超出BFC </h3>
      <article class="bfc-rules-2">
        <div class="inner-1 item">1. float + absolute</div>
        <div class="inner-2 item">2. float</div>
        <div class="inner-3 item">3. float</div>
      </article>
    </section>

CSS

.bfc-rules-2{
    width: 400px;
    background-color: #e2e2e2;
    margin-left: 30px;
    display:inline-block;
     .item{
      width: 100px;
      height: 100px;
      margin: 10px 0;
    }
    .inner-1{
      background-color: rgb(204, 202, 228);
      float: left;
       position: absolute;
      }
    .inner-2{
      background-color: rgb(187, 148, 148);
      width: 120px;
      float: left;
      // position: absolute;
      }
    .inner-3{
      background-color: rgb(82, 168, 33);
      float: left;
    }
  }

实际从并没有超出边界

clipboard.png

clipboard.png

那么这条规则该怎么理解?

阅读 1.6k
评论
    4 个回答
    • 176

    从字面意思上理解 他说可以超出 并不是说默认就超出 理论上所有的元素都可以超出父容器的显示范围 BFC只是定义区域内的排序规则 而不是展示范围

      • 1.4k

      这个absolute是看父级元素最近的定位元素来确定位置的,你个个top、left之类的看看,我测试了下是没有问题的。看看是不是父级元素的position是啥?子元素的定位相对于那个父级元素吧。

        • 2.5k

        你知道BFC是干什么使的吗???隔离dom中各个容器,使各个BFC之间不受影响。。。所以要么他说的这个规则要么张冠李戴,要么就说错了

          • 1
          • 新人请关照

          当只定义position:absolute时,top,bottom,left,right都不指定,则left,top值与原文档流位置一致。即跟当它static时的位置一样,但是不占位。

            撰写回答

            登录后参与交流、获取后续更新提醒