IE 下浮动元素的父元素设置marginBottom无效？

Question

DOM结构

<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 是清除浮动，行内样式设置的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;
  }
}

清除浮动代码

Answer 1

容器div的'zoom:1'触发了hasLayOut,其内部浮动子元素也参与到了容器的高度计算之中,但是浮动子元素设置的 'margin-bottom' 消失,可以通过为容器设置 'padding-bottom' 达到相似的效果.