父级元素与子集元素浮动影响的解决

时间 2019-12-08

标签元素子集浮动影响解决繁體版

原文原文链接

<style>
    .box{
        background-color: yellow;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div class="box">
    <div class="box1">div1</div>
    <div class="box2">div2</div>
</div>
</body>

先看如今的效果：spa

将div1和div2进行左浮动，会发现：3d

父级元素不见了，由于div1和div2脱离了标准流，父级元素么有框高属性，没东西撑开了，因此会受到浮动的影响消失，解决办法用overflow:hidden或者overflow:auto，我的理解为超出的东西让它隐藏或者父元素就会扩展包含浮动，可是，要记住一点，overflow属性不是为了清除浮动而定义的，要当心不要覆盖住内容或者触发了不须要的滚动条。code

<style>
    .box{
        background-color: yellow;
         overflow:atuo;     //或者是hidden
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div class="box">
    <div class="box1">div1</div>
    <div class="box2">div2</div>
</div>
</body>

以后为这样：blog