清除浮动的原因和方法

王哪儿跑啊

已于 2022-06-21 15:39:15 修改

阅读量499

点赞数 1

分类专栏： css 文章标签： css javascript

于 2022-05-29 11:55:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45836027/article/details/125029151

版权

css 专栏收录该内容

3 篇文章

订阅专栏

清除浮动

为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题；当父元素不给高度的时候，内部元素不浮动的时候会撑开，而浮动时父元素会变成一条线，所以这个时候就需要解决浮动；

清除浮动方式：

1.触发父元素的bfc，即便内部的子元素设置了浮动，也不会整个布局产生影响；

2.额外标签法，在内部子元素的后面新增一个空的元素，设置clear：both；

3.伪元素法，伪元素回作为它的一个子元素出现，新增的空的子元素需要是一个块级元素，并且清除浮动clear：both；

代码实现：

<title>清除浮动</title>
    <style>
        .div1 {
            width: 200px;
            border: 1px solid black;
            /* 第一种方法 ：触发父元素bfc */
            /* overflow: hidden;  */
        }

        .div2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .clear {
            clear: both;
        }

        /* 第三种方法 */
        /* 定义1个clearfix的类，利用伪元素的概念 */
        /* 伪元素会作为父元素div1的子元素出现 */
        /*  .clearfix::after {
            content: '';
            display: block;
            clear: both;
        } */
    </style>
</head>

<body>
    <div class="div1 clearfix">
        <div class="div2"></div>
        <!--第二种方法： 额外标签法 -->
        <div class="clear"></div>
    </div>
</body>