CSS 清除浮动

最新推荐文章于 2024-04-29 16:58:49 发布

木有君兮

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量149

点赞数

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

本文链接：https://blog.csdn.net/qq_43192409/article/details/109706513

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS 清除浮动

本文主要介绍清除浮动的一些简单方法。

什么叫清除浮动

当容器没有设置高度时，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

举例说明

1.看一下什么是清除浮动

以下代码运行的结果是什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            width: 500px;
            /* 不给父容器设置高度 */
            /* height: 500px; */
            background-color: red;
            
        }
        .first{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .two{
            width: 210px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .three{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>
    <div class="demo ">
         <div class="first ">
             我是第一个
         </div>
         <div class="two">
            我是第二个
         </div>
         <div class="three">
            我是第三个
         </div>
    </div>
</body>
</html>

从代码可以知道：浮动元素的父容器蓝色div是没有设置高度的。按理来说，父容器没有设置高度，应该会被自动撑开。但实际这段代码得到的结果是这样的：
在这里插入图片描述
是不是感觉很惊讶，为什么父容器没有被撑开。当使用浮动时出现这种情况，我们需要清除一下浮动。

2.清除浮动常见的几种方法

2.1、通过伪元素选择器

在父元素中追加一个块盒且是带有clear属性（值位非默认值）的值。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            width: 500px;
            /* 不给父容器设置高度 */
            /* height: 500px; */
            background-color: red;
            
        }
        .first{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .two{
            width: 210px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .three{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
        /* 伪元素选择器清除浮动 */
        .clearfix::after{
            content:'';
            display:block;
            clear:both
        }
    </style>
</head>
<body>
    <div class="demo clearfix">
         <div class="first ">
             我是第一个
         </div>
         <div class="two">
            我是第二个
         </div>
         <div class="three">
            我是第三个
         </div>
    </div>
</body>
</html>

运行这段代码可以得到这样的结果：可以看到父容器被浮动元素自动的撑开了，没有出现父容器看不到的情况，说明这样清除浮动是有效的。
在这里插入图片描述
注意为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1，触发haslayout。

2.2、使用CSS的overflow属性

给父元素设置overflow的值位非visible即可。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            width: 500px;
            /* 不给父容器设置高度 */
            /* height: 500px; */
            background-color: red;
            /* 使用overflow属性 */
            overflow:hidden;
            
        }
        .first{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .two{
            width: 210px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .three{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
        
    </style>
</head>
<body>
    <div class="demo ">
         <div class="first ">
             我是第一个
         </div>
         <div class="two">
            我是第二个
         </div>
         <div class="three">
            我是第三个
         </div>
    </div>
</body>
</html>

这段代码也可以达到清除浮动的作用。

2.3、使用带clear属性的空元素

在浮动元素后使用一个空元素，使用clear清除浮动。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            width: 500px;
            /* 不给父容器设置高度 */
            /* height: 500px; */
            background-color: red;
            
            
        }
        .first{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .two{
            width: 210px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .three{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
        /* 使用clear */
        .clear {
            clear: both;
        }
        
    </style>
</head>
<body>
    <div class="demo ">
         <div class="first ">
             我是第一个
         </div>
         <div class="clear"></div>
         <div class="two">
            我是第二个
         </div>
         <div class="clear"></div>
         <div class="three">
            我是第三个
         </div>
         <div class="clear"></div>
    </div>
</body>
</html>

这段代码达到的效果是这样的：
在这里插入图片描述
同样也达到了清除浮动的效果。

木有君兮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 清除浮动

CSS 清除浮动本文主要介绍清除浮动的一些简单方法。什么叫清除浮动当容器没有设置高度时，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。举例说明1.看一下什么是清除浮动以下代码运行的结果是什么？<!DOCTYPE html><html lang="en"><head> <meta cha
复制链接

扫一扫