CSS中清除浮动的几种方式

最新推荐文章于 2020-11-05 08:51:03 发布

安静的对折

最新推荐文章于 2020-11-05 08:51:03 发布

阅读量1.9k

点赞数 3

分类专栏： CSS 文章标签： html css 前端浮动 float

本文链接：https://blog.csdn.net/k491022087/article/details/52389309

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前面我们说了浮动后的元素会影响后面的元素，在进行页面布局的时我们使用了浮动后，会给我们带来很大的困扰，那么现在来说说清除浮动的几种的方法

1、使用额外的标签法，这也是W3C上面使用的方法

在浮动的盒子之下再放一个div标签，使用clear：both来清除浮动，

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 200px;
            border: 5px solid blue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .one {
            width: 100px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<!--增加额外的一个盒子来清除浮动-->
<div style="clear: both"></div>
<div class="one"></div>
</body>
</html>

浮动的影响虽然清除了，但是父盒子的高度没有办法撑开，而且还增加了没有必要的标签，

2、使用overflow来清除浮动

先找到浮动盒子的父元素，然后在父盒子里添加overflow：hidden来清除浮动，overflow：hidden原本是隐藏超出部分，但是在这里可以清除浮动，可以说是浏览器的一个bug吧

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 200px;
            border: 5px solid blue;
            overflow: hidden;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .one {
            width: 100px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<div class="one"></div>
</body>
</html>

使用overflow:hidden就把浮动的影响清除了，同时父元素的高度也撑开了。

3、使用伪元素 :after :before来清除浮动，推荐使用这种方式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 200px;
            border: 5px solid blue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .one {
            width: 100px;
            height: 200px;
            background: green;
        }
        .clearfix:after {
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            clear: both;
            visibility: hidden; /*将元素隐藏起来*/
            /*在页面的clearfix元素后面添加了一个空的块级元素（这个元素的高为0，行高也为0，并且这个元素清除了浮动）*/
        }
    </style>
</head>
<body>
<div class="father clearfix">
    <div class="son"></div>
</div>
<div class="one"></div>
</body>
</html>

效果和第二种方法一样

安静的对折

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS中清除浮动的几种方式

前面我们说了浮动后的元素会影响后面的元素，在进行页面布局的时我们使用了浮动后，会给我们带来很大的困扰，那么现在来说说清除浮动的几种的方法1、使用额外的标签法，这也是W3C上面使用的方法在浮动的盒子之下再放一个div标签，使用clear：both来清除浮动， * { margin: 0;
复制链接

扫一扫

专栏目录