父級元素與子集元素浮動影響的解決

時間 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

相關標籤/搜索