美文网首页
css浮动清除

css浮动清除

作者: 青春前行 | 来源:发表于2017-07-03 16:58 被阅读0次

    解决办法:(指明该元素周围不可出现浮动元素)

    1、在最外围的div设置能够放下两个div的高度(这个不说了)

    2、一般我们采用的是clear:both的做法,但是这里我们会多加上div的标签,代码变多了。
    3、对父级的div使用overflow:hidden
    <pre>
    <div class="div1">
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4"></div>
    </div>
    </pre>
    style样式:
    <code>
    .div1{
    border: 1px solid red;
    clear: both;
    }
    .div2{
    width: 100px;
    height: 30px;
    border: 1px solid blue;
    float: left;
    }
    .div3{
    width: 100px;
    height: 30px;
    border: 1px solid blue;
    float: left;
    }
    .div4{
    clear: both;
    }
    </code>

    实现的效果是:

    image.png

    下面的是直接在div1使用了overflow:hidden 后的效果图:

    image.png

    和上面达到了一样的效果。

    相关文章

      网友评论

          本文标题:css浮动清除

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