美文网首页
float 高度自适应

float 高度自适应

作者: hsqin | 来源:发表于2019-10-19 17:24 被阅读0次

    使用float之后,高度无法自适应,

    解决方法(1) 单独加一个clear:both的div放在最后一个float之后,如图

    //方法1
      <div class="parent" style="background:#ccc;min-height: 20px;">
          <div style="float:left;width:50%;">1111</div>
          <div style="float:left;width:50%;">222</div>
          <div style="float:left;width:50%;">last</div>
          <div style="clear:both"></div>
        </div>
    
    没有clear的.png 有clear的.png

    解决方法2: 给父组件添加overflow:hidden属性

    //方法2
    <div class="parent" style="background:#ccc;min-height: 20px;overflow: hidden;">
          <div style="float:left;width:50%;">1111</div>
          <div style="float:left;width:50%;">222</div>
          <div style="float:left;width:50%;">last</div>
        </div>
    

    相关文章

      网友评论

          本文标题:float 高度自适应

          本文链接:https://www.haomeiwen.com/subject/mnrnmctx.html