解决float浮动导致的布局高度塌陷问题

最新推荐文章于 2024-10-30 16:57:22 发布

原创最新推荐文章于 2024-10-30 16:57:22 发布 · 573 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #float

CSS学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种解决浮动元素导致布局错乱的方法，通过在父元素上触发BFC（块格式化上下文）来清除浮动。示例代码展示了如何使用CSS伪元素`:after`和属性`clear:both`实现这一目标。

更新：只需要在父元素上触发BFC就好了。

在设定了float浮动属性元素的父级元素标签上清除浮动就好了。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .content {
            background: red;
        }
        h3, p {
            float: left;
        }
        p {
            margin-top: 1rem;
        }
        .clearfix:after,
        .clearfix:before {
            content: '';
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
    </style>
</head>
<body>
<div class="content clearfix">
    <h3>我是标题我是标题</h3>
    <p>我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</p>
    <p>我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</p>
</div>
</body>
</html>