CSS清除浮动的方法

2021-11-24 09:03:17 阅读：126 来源： 互联网

标签：浮动元素清除 float 100px height width CSS left

在这里插入图片描述

一、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>

在这里插入图片描述

标签：浮动,元素,清除,float,100px,height,width,CSS,left
来源： https://blog.csdn.net/weixin_44582045/article/details/121506298

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS清除浮动的方法

一、clear属性

二、BFC

三、空标签

四、伪元素