span标签使用display高度改变、float父辈元素塌陷问题

span元素在使用display：inline-block 与overflow:hidden属性后，高度改变。

样式：

.techno-content-detail-content span {

     display : inline-block ;

}

.filelimit {

     overflow : hidden ;

     text-overflow : ellipsis ;

     white-space : nowrap ;

}

代码：

<div class="techno-content-detail-content">

　　<span>

　　　　文档说明：

　　　　<span class="filelimit">fafasfasdfasd</span>

　　</span>

</div>

 

建议：span不使用display:inline-block属性。可使用float属性。

使用float属性时，对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷，效果如下图所示。

父辈元素可以使用overflow:hidden;消除子元素float带来的塌陷效果

转载于:https://www.cnblogs.com/xujinyi1990/p/3465590.html