UI - HTML

搬砖ing

于 2018-08-29 11:53:52 发布

阅读量350

点赞数

本文链接：https://blog.youkuaiyun.com/qijin2016/article/details/82181076

版权

包含float 元素的div标签的height的collapse问题。

<div class='parent'>
    <div class='child1' style="float:left;">
    ......
    </div>
    <div class='child2' style="float:right;">
    ......
    </div>
</div>

上面的parent div的高度height将会是0. 于是border等与高度height相关的属性就都不生效了。

一般解决方法，制定height

<div class='parent' style='height:20px;'>
.....
</div>

优雅的解决方法，指定 overflow 为auto

<div class='parent' style='overflow:auto'>
.....
</div>