HTML+CSS基础(解决高度塌陷问题)

2024-03-07 20:22:03

元素脱离文档流导致的高度塌陷问题

1.问题描述：
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">     
        .box1{
            border: 10px red solid;
        }

        .box2{
            background-color: yellow;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

元素脱离文档流的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">     
        .box1{
            border: 10px red solid;
        }

        .box2{
            background-color: yellow;
            width: 100px;
            height: 100px;
            /* float: left; */
        }
        .box3{
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

想要这样的效果.png

设置浮动之后（高度塌陷问题）.png

由于父元素的高度塌陷，则父元素的所有元素都会向上移动，这样会导致页面布局混乱，所以在开发中一定要避免出现高度塌陷问题

2.问题解决一：
根据W3C标准，在页面中元素都有一个隐藏的属性叫Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

当开启BFC后，元素将会具有以下特性：

元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动元素

如何开启BFC：

1)设置元素的浮动(虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移，不能解决问题)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
/非父元素设置浮动/
float: left;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>


  ![给父元素设置浮动的结果.png](http://upload-images.jianshu.io/upload_images/3063110-e3f921af945a6f10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

+ 2)设置元素的绝对定位（和1效果差不多，不推荐）
+ 3)设置元素的inline-block（父元素的宽度又没了，不推荐使用）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
display: inline-block;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>


  ![第三种方式的效果图.png](http://upload-images.jianshu.io/upload_images/3063110-39b189264d80ed92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

+ 4)将元素的overflow设置为一个非visible的值（推荐这种方式开启BFC，副作用小，IE6及以下不支持，此时可以使用hasLayout,给父元素设置```zoom:1```,此处不赘述）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
overflow: hidden;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>


  ![overflow为hidden.png](http://upload-images.jianshu.io/upload_images/3063110-ed5337266a7dad7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


******
> ***3.问题解决二：***
clear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置。

+ 可选值：
    - left ：忽略左侧浮动 （清除左侧浮动对当前元素的影响）

    - right ：忽略右侧浮动 （清除右侧浮动对当前元素的影响）

    - both ：忽略全部浮动 （清除两侧对他影响最大的浮动对）

    - none ：不忽略浮动，默认值

/通过空白撑开父元素，清除浮动，基本没有副作用，可以兼容各种浏览器/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
clear: left;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .clear{
        clear: left;
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
<div class="box3"></div>
</body>
</html>


![clear.png](http://upload-images.jianshu.io/upload_images/3063110-adcdc009e889bc38.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

******
> ***4.问题解决三：***通过after伪类，和添加div效果一样，而且不会再页面中添加div，最推荐的方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
clear: left;
}

    /* 通过after伪类来选择box1的后面 */
    .clearfix:after{
        /* 必须设置一个空的congtent,否则不起作用  */ 
        content: "";
        /* 转换成块元素  */
        display: block;
        clear: both;
    }
    /*为了兼容IE6*/
    .clearfix{zoom:1}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }

    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

作者：槑如是
链接：https://www.jianshu.com/p/f09f40591d97
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

码农公寓

元素脱离文档流导致的高度塌陷问题

相关文章