【前端css】常用4大法清除浮动----面试必考（牛客刷题系列第一期）

最新推荐文章于 2022-12-19 10:40:30 发布

爱前端的小毅

最新推荐文章于 2022-12-19 10:40:30 发布

阅读量273

点赞数 5

分类专栏：面试牛客刷题系列文章标签： css 前端面试

本文链接：https://blog.csdn.net/qq_45766770/article/details/125754676

版权

牛客刷题系列同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

面试

1 篇文章 0 订阅

订阅专栏

<=> 朋友你好，这里是小毅的前端日记，分享代码日常 !
<=>本文目标：巩固css基础，搞定清除浮动的4大方法
<=>卑微的大三前端仔持续输出前端知识，欢迎批评指正 !
<=> 愿你永远青春激昂，风华永驻！

面试官：说一说css怎么清除浮动？

下面就说一下我在牛客上面写的解答吧：总共4个方法，分别是
额外标签法
overflow法
浮动加浮动（不常用）
after 伪元素法（强烈推荐）
具体如下：

哦对了，差点忘说，最近刷题的时候有小伙伴在问，有没有好用并且成体系的的刷题资源，
那今天就为大家推荐一款我正在用的、超nice的神器点击访问牛客网
里面的互联网大厂面试真题刷到手软，从基础到进阶，只有你想不到，没有他做不到，赶紧卷起来吧！助你成为offer收割机！

1.额外标签法

由于添加的盒子必须是块级元素，并且结构性较差，因此不推荐用这个方法，具体使用方法：在浮动元素后使用一个空元素如

<div class="clear"></div>

并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。

.clear {
           clear: both;
         }

2.overflow法

使用 CSS 的 overflow 属性给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动。优点是可以使代码更简洁，但同时也有很大缺点：无法显示溢出的部分，可谓是鱼和熊掌不可得兼

.box {
        /* 2、给父元素添加overflow:hiden; 
        优点：代码简洁
        缺点：无法显示溢出的部分*/
        overflow: hidden; 
        width: 500px;
        background-color: rgb(241, 112, 112);
        border: 5px solid #4dd2f3;

    }

3.浮动加浮动法

给浮动的元素的容器添加浮动。解释：给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。（代码略）

4.after 伪元素法（最推荐）

/*   单伪类元素 */
     .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    
        .clearfix {
           /*  IE6、7 专有，照顾兼容性 */
            *zoom: 1;
        }
 /*   双伪类元素 */
    	.clearfix:before, 
    	.clearfix:after {
             	content: "";
                display: table;
            }
      	 .clearfix:after {
           		 clear: both;
       		}
         .clearfix {
            /* IE6、7 专有，照顾兼容性 */
            	*zoom: 1;
       	    }

下面我们来看一下关于使用伪类元素的实际例子吧：效果如下
在这里插入图片描述

<style>
   /* 3、伪元素法 ，给父元素添加这个类     
   .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        IE6、7 专有，照顾兼容性
        *zoom: 1;
    }

    /* 以上是单伪元素，下面介绍双伪类 */
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        /* IE6、7 专有，照顾兼容性 */

        *zoom: 1;
    }

    .box {
        width: 500px;
        /* 父元素不添加高度，因此要清除浮动 ,如果不清除，那么footer这个盒子就会来占用box的位置*/
        background-color: #f5aeae;
        border: 5px solid #4dd2f3;
    }

    .NO1 {
        float: left;
        width: 100px;
        height: 80px;
        background-color: #666666;
    }

    .NO2 {
        float: left;
        width: 100px;
        height: 80px;
        background-color: #271dad;
    }

    .footer {
        width: 400px;
        height: 300px;
        background-color: #8fd37e;
    }
</style>

<body>
    <div class="box clearfix">
        <div class="NO1"></div>
        <div class="NO2"></div>
    </div>
    <div class="footer"></div>
</body>