其他分享
首页 > 其他分享> > 前端学习笔记50-解决高度塌陷的最终方案

前端学习笔记50-解决高度塌陷的最终方案

作者：互联网

前端学习笔记50-解决高度塌陷的最终方案


前面提到的用BFC解决高度塌陷，多少都有点不好，因此用上一节学的clear来解决高度塌陷。

先看高度塌陷

<!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>Document</title>
    <style>
        .box1{
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float:left;
        }

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>


</body>
</html>

在这里插入图片描述
这个塌陷是因为box1只有一个子元素，如果有其他子元素，就不会塌陷了。
看代码

<!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>Document</title>
    <style>
        .box1{
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float:left;
        }
        .box3{
            clear:both
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

在这里插入图片描述
设置了一个空的box3，而且用clear使其位置不受box2的浮动而变化范围，这样box1就被box3的位置而撑起来了。

但是这样凭空加一个box3不合理。加box3是html的事，而css只负责表现，所以高度塌陷问题还是得想办法由css自己解决。
思路不变，还是想加一个空标签在后面，于是用为伪元素after。伪元素

这里要注意，after伪元素默认是行内元素，得用display转为块元素。

<!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>Document</title>
    <style>
        .box1{
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float:left;
        }
        .box1::after{
            content:'';
            clear: both;
            display:block;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

标签：元素,100px,50,笔记,塌陷,box1,box3,box2
来源： https://blog.csdn.net/weixin_45034895/article/details/116376163