CSS清除浮动的方法

最新推荐文章于 2023-08-29 14:37:30 发布

老电影故事

最新推荐文章于 2023-08-29 14:37:30 发布

阅读量211

点赞数

分类专栏： CSS 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_44582045/article/details/121506298

版权

CSS 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

在这里插入图片描述

一、clear属性

适合上下关系的标签清除浮动

<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: 100px;
            height: 100px;
            background: pink;
            float: left; ///
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background: skyblue;
            clear: left; ///
        }
    </style>
</head>

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

在这里插入图片描述

二、BFC

只要元素满足下面任一条件即可触发BFC特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值(hidden、auto、scroll)

<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 black;
            /* position: fixed;position的值为absolute或fixed */
            /* float: left; 设置父元素float的值不为none*/
            /* overflow: hidden;设置父元素overflow的值不为visible */
            /* display: flex;display的值为inline-block、table-cell、table-caption、flex */
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background: pink;
            float: left;
        }
    </style>
</head>

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

三、空标签

这个方法通俗点将就是，父元素下面的子元素都浮动了，如果有一个不浮动岂不是就能包住了？没错这个方法就是尾部添加div的方式思想。

<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 black;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background: skyblue;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
        <div style="clear:both"></div> ///
    </div>
    2222222222
</body>

四、伪元素

<style>
    .clearfix{
        *zoom:1;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
</style>

    <style>
        .box1 {
            width: 200px;
            border: 1px solid black;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background: skyblue;
            float: left;
        }
        
        .clearfix {
            *zoom: 1;
        }
        
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>

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

在这里插入图片描述

老电影故事

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS清除浮动的方法

一、clear属性适合上下关系的标签清除浮动<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>.
复制链接

扫一扫