清除浮动的五种方法详解

最新推荐文章于 2022-02-22 19:15:39 发布

置顶忆弥

最新推荐文章于 2022-02-22 19:15:39 发布

阅读量2.1w

点赞数 22

分类专栏：前端开发文章标签： css 前端清除浮动

本文链接：https://blog.csdn.net/qq_43692768/article/details/109547020

版权

前端开发专栏收录该内容

9 篇文章 2 订阅

订阅专栏

前言：
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。

为什么会使用浮动？
一开始出现浮动只是为了解决文字环绕图片问题，但最后是为了解决几个块级元素并排显示问题，虽然可以使用定义块级元素的display为inline-block（这种方式也不会出现父级元素坍塌问题）但是这种方式不能控制元素的位置而是默认从左到右，所以要实现元素是居左还是居右使用浮动更方便。但是使用了float之后不清除浮动就会出现父级高度塌陷问题。

实例：

HTML代码基本代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        #parent{
            border: 1px solid black;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>   
</body>
</html>

效果图-----未清除浮动

效果图-----已清除浮动
在这里插入图片描述

当为子元素设置了浮动，如果不清除浮动，那么父元素将会出现高度塌陷的现象。所以当我们设置了浮动后，就要解决浮动带来的影响。下面就要我们介绍几种清除浮动的方法！

方法一：额外标签法

给谁清除浮动，就在其后额外添加一个空白标签，给其设置clear：both。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化比较差。

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来。

css样式

#clear{
    clear: both;
}

html代码

<div id="parent">
    <div id="child"></div>
    <!-- 方法一  额外标签法 -->
    <div id="clear"></div>
</div>

方法二：父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

css样式

#parent{
    overflow: hidden;
}

方法三：使用after伪元素清除浮动

优点：符合闭合浮动思想，结构语义化正确。

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

css样式

#parent:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
#parent{
    /* 触发 hasLayout */ 
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

方法四：使用before和after双伪元素清除浮动

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

css样式

#parent:after,#parent:before{
content: "";
display: table;
}
#parent:after{
    clear: both;
}
#parent{
    *zoom: 1;
}

方法五：为父元素设置高度

缺点: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。

优点: 简单粗暴直接有效，清除了浮动带来的影响。

忆弥

关注

22
点赞
踩
191

收藏

觉得还不错? 一键收藏
2
评论
清除浮动的五种方法详解

前言：在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。实例： HTML代码基本代码<!DOCTYPE html><html lang="
复制链接

扫一扫