胖蔡说技术
随便扯扯

使用BFC解决元素高度塌陷问题

当我们布局页面的时候,若是没有设置父布局的宽高,父布局的宽高则是根据子布局计算而来,由子布局撑起来,若是这个时候,我们给子元素设置为浮动布局(float浮动),浮动元素脱离文档流后就会导致父元素出现高度塌陷的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度塌陷</title>
    <style>
    .box{
        border-top:1px solid blueviolet;
    }
    .box .son{
        color: #eee;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
    }
    .son1{
        background-color: red;
    }
    .son2{
        background-color: orange;
    }
    .son3{
        background-color: orangered;
    }
</style>
</head>
<body>
    <div class="box">
        <div class="son son1">子元素一</div>
        <div class="son son2">子元素二</div>
        <div class="son son3">子元素三</div>
    </div>
</body>


</html>
解决这个问题,只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden
<style>
    .box{
        border-top:1px solid blueviolet;
        overflow: hidden;
    }
    .box .son{
        color: #eee;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
    }
    .son1{
        background-color: red;
    }
    .son2{
        background-color: orange;
    }
    .son3{
        background-color: orangered;
    }
</style>
<body>
    <div class="box">
        <div class="son son1">子元素一</div>
        <div class="son son2">子元素二</div>
        <div class="son son3">子元素三</div>
    </div>
</body>
赞(1) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 使用BFC解决元素高度塌陷问题
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏