【高度塌陷最终解决方案】使用伪元素解决高度塌陷

最新推荐文章于 2023-07-14 08:00:00 发布

原创最新推荐文章于 2023-07-14 08:00:00 发布 · 553 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了如何利用CSS伪元素::after来解决高度塌陷问题。通过在父元素上添加::after伪元素，设置content为空并使用clear和display属性，可以确保浮动元素不会导致容器高度塌陷。这种方法在日常布局中非常实用。

使用伪元素解决高度塌陷

文章目录

使用伪元素解决高度塌陷
前言
一、什么是伪元素？
二、使用步骤
总结

前言

这一期将介绍如何通过::after伪元素来解决高度塌陷。

一、什么是伪元素？

常见的伪元素有::before 和 ::after 两种，他们不是真正的页面元素，html没有对应的元素，但是表现和用法保持一致。通过这种方法可以实现大部分的网页布局。

ps.
1.设置伪元素时必须设置content属性，来表现伪元素，内容可以为空但是必须设置属性。
2.伪元素不占位置。

二、使用步骤

代码如下（示例）：

<!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>after伪元素</title>
    <style>
        .box1{
            border: 10px red solid;
        }

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

        .box3{
            clear: both;
        }
        
        .box1::after{
            content: '';
            clear: both;
            /* 
                ::after伪元素默认为行内元素
                    不独占一行
            */
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>