消除浮动

最新推荐文章于 2021-12-29 09:00:00 发布

qq_40480885

最新推荐文章于 2021-12-29 09:00:00 发布

阅读量152

点赞数

文章标签：作业

本文链接：https://blog.csdn.net/qq_40480885/article/details/102313729

版权

为伪元素 ::after 消除浮动

案列：`
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>after消除浮动</title>
    <style>
        .main{
            width: 300px;
            background-color: pink;
        }
        .main>div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
        }
        .main.box2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: right;
        }
        p{margin: 0;}
    </style>
</head>
<body>
    <div class="main clear">
        我是大盒子
        <div class="box1">我是盒子1</div>
        <div class="box2">我是盒子2</div>
    </div>
</body>
</html>

效果图：
在这里插入图片描述
消除浮动代码：

.clear::after{
            content: "";
            display: block;
            clear: both;
        }

效果图：
在这里插入图片描述
2.此现象出现的原因分析：此时浮动的子元素已经脱离了标准流，换句话说就是子元素浮动在父级元素之上了。

qq_40480885

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫