清除浮动的常用方法

Misnice

于 2020-01-22 15:43:05 发布

阅读量289

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/Misnice/article/details/104070448

版权

CSS 专栏收录该内容

19 篇文章

订阅专栏

1.给浮动元素父级设置高度
2.在最后一个浮动标签后，新加一个标签，将其样式设置为 clear：both；
3.在父级元素添加样式 overflow:hidden; 此方法会将多出的内容裁切掉，无法显示要溢出的元素
4.使用before和after双伪元素清除浮动,使用伪元素清除浮动必须是块级元素上使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>image</title>
    <style>
        * {padding: 0;margin: 0;}
        p{float: left;}
        .clearfix::before,.clearfix::after {
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }
    </style>
</head>

<body>    
    <div style="border:1px solid green;" class="clearfix">
        <p style="width:100px;height:100px;background:red;"></p>
        <p style="width:100px;height:100px;background:red;"></p>
        <p style="width:100px;height:100px;background:red;"></p>
    </div>
    
</body>
</html>