【清除浮动的 5 种方法】

最新推荐文章于 2024-07-08 14:25:11 发布

Clover‘s Blog

最新推荐文章于 2024-07-08 14:25:11 发布

阅读量847

点赞数 2

分类专栏： CSS 文章标签： css html5 前端

本文链接：https://blog.csdn.net/Clover_zlx/article/details/128482183

版权

CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

什么是浮动？它是怎样产生的？

会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

产生的原因：

在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响甚至破坏布局的现象，这个现象叫浮动溢出。

为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。

浮动特性

浮动元素会脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

为什么使用浮动？

可以让多个块级元素一行内排列显示。

最开始出现浮动只是为了解决文字环绕图片问题，但最后是为了解决几个块级元素并排显示问题，虽然可以使用定义块级元素的display为inline-block（这种方式也不会出现父级元素坍塌问题）

但是这种方式不能控制元素的位置而是默认从左到右，所以要实现元素是居左还是居右使用浮动更方便。

但是使用了float之后不清除浮动就会出现父级高度塌陷问题。

清除浮动的方法：

方法1：【额外标签的添加】

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

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

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

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

代码展示：

<!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;
        }
        #clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
        <!-- 方法一  额外标签的添加 -->
        <div id="clear"></div>
    </div>   
</body>
</html>

方法2：【给父元素添加overflow:hidden】

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

优点：代码简洁

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

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给父元素添加overflow:hidden属性</title>
    <style>
        #parent{
            border: 1px solid black;
            overflow: hidden;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>   
</body>
</html>

方法3：【使用after伪元素清除浮动】

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素清除浮动</title>
    <style>
        #parent{
            border: 1px solid black;
            overflow: hidden;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        #parent:after{
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        #parent{
            /* 触发 hasLayout */ 
            *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>   
</body>
</html>

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

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用before和after双伪元素清除浮动</title>
    <style>
        #parent{
            border: 1px solid black;
            overflow: hidden;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        #parent:after,#parent:before{
            content: "";
            display: table;
        }
        #parent:after{
            clear: both;
        }
        #parent{
            *zoom: 1;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>   
</body>
</html>

方法5：【为父元素设置高度】

缺点: 手动添加高度，若后面的高度发生变化，还要再次修改高度，不便于后期维护

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

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