清除浮动的三种方式

最新推荐文章于 2021-02-25 11:06:17 发布

置顶过往深处少年蓝

最新推荐文章于 2021-02-25 11:06:17 发布

阅读量373

点赞数

分类专栏： css+html 文章标签： cass 清除浮动

本文链接：https://blog.csdn.net/qq_39009348/article/details/93032154

版权

css+html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们简单总结下清除浮动的几种方式：

首先我们得明白，如下布局，如果不清除浮动，那将会怎样：class为one的盒子将会和父级盒子部分重合在一起，且父级盒子无法被子级撑开。那我们要清除浮动达到的效果就是：父级盒子被撑开，下面的盒子不会重叠在一起。

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

如代码上面：

方式1：在父元素盒子后面增加一个空盒子：clear：both清除浮动，浮动的影响虽然清除了，但是父盒子的高度没有办法撑开，而且还增加了没有必要的标签，

方式二：用overflow：hidden清除，这种清除的弊端是当父元素块里面的内容确实多余了父元素时，那多出的部分将会被隐藏，所以这种方式只有特定的时候才能用，比如内容不会溢出父元素。

方式三：增加伪元素，如上面所述。推荐使用这种方式

过往深处少年蓝

关注

0
点赞
踩
1

收藏

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

我们简单总结下清除浮动的几种方式：首先我们得明白，如下布局，如果不清除浮动，那将会怎样：class为one的盒子将会和父级盒子部分重合在一起，且父级盒子无法被子级撑开。那我们要清除浮动达到的效果就是：父级盒子被撑开，下面的盒子不会重叠在一起。<!DOCTYPE html><html><head lang="en"> <meta cha...
复制链接

扫一扫

专栏目录