鍍金池/ 問答/HTML5  HTML/ IE 下浮動(dòng)元素的父元素設(shè)置marginBottom無效？

IE 下浮動(dòng)元素的父元素設(shè)置marginBottom無效？

DOM結(jié)構(gòu)

<Col class="panel page-panel cf" :span="24" style="margin-bottom: 20px;">
   <Page :total="pageInfo.total" :current.sync="pageInfo.current" class="fr":page-size="15">        
   </Page>
</Col>

其中cf 是清除浮動(dòng)，行內(nèi)樣式設(shè)置的margin無效

.panel {
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  &.page-panel {
    padding: 15px 20px 15px 0;
    height: 62px;
    overflow: hidden;
  }
}

清除浮動(dòng)代碼
clipboard.png

回答
編輯回答
雨萌萌

容器div的'zoom:1'觸發(fā)了hasLayOut,其內(nèi)部浮動(dòng)子元素也參與到了容器的高度計(jì)算之中,但是浮動(dòng)子元素設(shè)置的 'margin-bottom' 消失,可以通過為容器設(shè)置 'padding-bottom' 達(dá)到相似的效果.

2018年6月28日 23:07