css 伪元素清除浮动 clearfix clear:both详解

最新推荐文章于 2024-05-22 22:58:54 发布

GYB4979

最新推荐文章于 2024-05-22 22:58:54 发布

阅读量502

点赞数

文章标签： css css3 html5

本文链接：https://blog.csdn.net/GYB4979/article/details/121112570

版权

在这里插入图片描述
案例视屏链接清除浮动 clear:both 深度讲解


<!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 {
            width: 200px;
            border: 1px solid #000;
            /* 方法1  overflow: hidden; */
            /* 方法2 float: left; */
            /* 方法3 相对定位: 注意,不能用relative(无效)    position: absolute; */
        }

        .box2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #6cf;
        }
        /* 方法4 用伪元素清除浮动 */
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        /* 思考 为什么要放在box1 clear属性的作用是什么 */
        /*  MDN官方链接解释:    https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear */
        /* clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。 */
        /* 通俗讲 就是指定一个元素 一定要放置在这个浮动元素下面的哪个位置 */
        /* clear 有四个属性值 none both left right  分别用于指定当前元素位于它之前浮动元素的摆放位置 */
        /* 我们用伪元素 定义了一个空的块级元素 用clear:both 就等于这个空盒子必须位于这个浮动元素的下面 从而撑开父盒子的高度 */

        /* 案例来源视屏链接:https://www.bilibili.com/video/BV1eL4y1a76C?p=1 */

        
    </style>
</head>

<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>

</html>

在这里插入图片描述

GYB4979

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 伪元素清除浮动 clearfix clear:both详解

案例视屏链接清除浮动 clear:both 深度讲解<!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-scal.
复制链接

扫一扫