高度塌陷

作者: 浮华_e823 | 来源:发表于2018-11-26 18:13 被阅读0次

前端笔记(5)
解决高度塌陷、外边距重叠
前端
web进阶之十二：高度塌陷、清除浮动
前端盒子模式解决高度塌陷
前端07day
塌陷，导航，定位
高度塌陷
高度塌陷
高度塌陷

高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style type="text/css">
        .box1{
            border:10px red solid;
            /*height: 100px;*/
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
            float:left;
        }
        /*父元素的高度是子元素撑开的*/
        .box3{
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">十点差三分</div>
    </div>
    <div class="box3"></div>
</body>
</html>
这样会造成高度塌陷

解决1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决高度塌陷1</title>
    <style type="text/css">
    /*
    一个面试题:
        BFC
            开启之后的特性：
                1父元素的处置外边距不会和子元素重叠
                2开启BFC元素不会被浮动元素所覆盖
                3开启bfc的元素可以包含浮动的子元素
            如何开启：
                1设置元素浮动  导致父元素的宽度丢失 不推荐
                2设置元素的绝对定位
                3设置元素为inline-block
                4将元素的overflow设置为一个非visivle的值
                IE6及一下的浏览器不支持BFC
                hasLayout
                zoom 设为1 副作用最小
    */
        .box1{
            border:10px red solid;
            /*display: inline-block;*/
            overflow: hidden;
            zoom：1;

        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
            float:left;
        }
        /*父元素的高度是子元素撑开的*/
        .box3{
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">十点差三分</div>
    </div>
    <div class="box3"></div>
</body>
</html>

解决2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决高度塌陷2</title>
    <style type="text/css">
        .box1{
            border: 1px solid red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="clear"></div>
    </div>
</body>
</html>
解决3
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决高度塌陷3</title>
    <style type="text/css">
        .box1{
            border:1px solid blue;
        }
        .clearfix:after{
            content:'';
            display: block;
            clear: both;
        }
        .clearfix{
            zoom:1;
        }
        .box2{
            width: 100px;
            height:100px;
            background-color: red;
            float:left;
        }

    </style>
</head>
<body>
    <dir class="box1 clearfix">
        <div class="box2">lalal</div>
    </dir>
</body>
</html>