鍍金池/ 問(wèn)答/HTML5  網(wǎng)絡(luò)安全  HTML/ BFC內(nèi)元素為absolute的元素問(wèn)題

BFC內(nèi)元素為absolute的元素問(wèn)題

今天看一篇BFC的文章,并動(dòng)手試了其中的規(guī)則,對(duì)一下這條不是很理解,求指導(dǎo):
http://www.cnblogs.com/dojo-l...

clipboard.png

每個(gè)元素的左外邊距與包含塊的左邊界相接觸(從左向右),即使浮動(dòng)元素也是如此。(這說(shuō)明BFC中子元素不會(huì)超出他的包含塊,而position為absolute的元素可以超出他的包含塊邊界

實(shí)際
html

<!-- BFC子元素不會(huì)超出包含他的元素,positon為absolute的子元素可以
        問(wèn)題:對(duì)inner-1設(shè)置position:absolute,并沒(méi)有超出父元素的邊界?
     -->
    <section class="bfc-rules-wrap">
      <h3>2. 內(nèi)部的元素不會(huì)超出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;
    }
  }

實(shí)際從并沒(méi)有超出邊界

clipboard.png

clipboard.png

那么這條規(guī)則該怎么理解?

回答
編輯回答
卟乖

從字面意思上理解 他說(shuō)可以超出 并不是說(shuō)默認(rèn)就超出 理論上所有的元素都可以超出父容器的顯示范圍 BFC只是定義區(qū)域內(nèi)的排序規(guī)則 而不是展示范圍

2018年8月6日 09:29
編輯回答
淚染裳

你知道BFC是干什么使的嗎???隔離dom中各個(gè)容器,使各個(gè)BFC之間不受影響。。。所以要么他說(shuō)的這個(gè)規(guī)則要么張冠李戴,要么就說(shuō)錯(cuò)了

2018年6月7日 14:10
編輯回答
怣人

當(dāng)只定義position:absolute時(shí),top,bottom,left,right都不指定,則left,top值與原文檔流位置一致。即跟當(dāng)它static時(shí)的位置一樣,但是不占位。

2018年7月15日 13:51
編輯回答
短嘆

這個(gè)absolute是看父級(jí)元素最近的定位元素來(lái)確定位置的,你個(gè)個(gè)top、left之類(lèi)的看看,我測(cè)試了下是沒(méi)有問(wèn)題的??纯词遣皇歉讣?jí)元素的position是啥?子元素的定位相對(duì)于那個(gè)父級(jí)元素吧。

2017年11月27日 05:25