常见清除浮动的四种方法

最新推荐文章于 2024-04-28 07:15:04 发布

Hz没头脑

最新推荐文章于 2024-04-28 07:15:04 发布

阅读量212

点赞数

分类专栏：清除浮动文章标签： html css

本文链接：https://blog.csdn.net/m0_61825758/article/details/128231704

版权

清除浮动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当时使用浮动想做一个这样的效果时

往往会得到一个这样的效果

问题在于你没有清除浮动

浮动的元素会脱离标准流，浮动的盒子不再保留原先的位置

1.额外标签法也称隔墙法，是W3C推荐的做法。
		在浮动元素末尾添加一个空的标签<div style="clear:both"></div>,或者其他标签如<br>

2.父级添加overflow属性
		overflow:hidden  					缺点：无法显示溢出的部分 

3.父级添加after伪元素		本质是额外标签法的升级 
    .clearfix:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .clearfix {
      /* IE6、7专有 */
      *zoom: 1;
    }

4.父级添加双伪元素
    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }

源代码

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            /* 方法1 */
            /* 父级添加该代码，清除浮动 */
            /* 缺点：无法显示溢出的部分 */
            /* overflow: hidden; */
        }

        /* 方法3
        *   父级添加after伪元素
        */
        /* .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        } */

        /* IE6、7专有 */
        /* .clearfix {
            *zoom: 1;
        } */

        /* 方法4 */
        /* 父类添加双伪类 */
        /* .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        } */

        .top div {
            background-color: bisque;
            width: 200px;
            height: 200px;
            float: left;
        }

        .footer {
            height: 300px;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="top clearfix">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <!-- 方法2 -->
        <!--  隔墙法，清除浮动  新添加的标签必须是块状元素，不能是行内元素-->
        <!-- <br style="clear: both;" /> -->
    </div>
    <div class="footer"></div>
</body>

</html>

该笔记是由黑马程序员的pink老师所整理，后被引用，如有侵权联系删除。