清除浮动

最新推荐文章于 2024-06-13 18:31:56 发布

hzjangel

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量93

点赞数

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

本文链接：https://blog.csdn.net/hzjanger/article/details/102559014

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用带有clear属性的空元素

在浮动元素后面使用一个空元素来清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 400px;
            background: #1bff18;
        }

        .item1 {
            background: #f71d1a;
            width: 100px;
            height: 100px;
            float: left;

        }

        .item2 {
            background: #ff944f;
            width: 100px;
            height: 100px;
            float: right;

        }

        .item3 {
            background: #e9fd29;
            width: 200px;
            height: 200px;
        }

        .clear {
            clear: both;
        }

    </style>
</head>
<body>
<div class="content">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="clear"></div>
    <div class="item3"></div>
</div>
</body>
</html>

overflow: hiden或auto

为浮动元素的容器添加overflow:hiden或者overflow: auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 400px;
            background: #1bff18;
            overflow: hidden;
            zoom:1

        }

        .item1 {
            background: #f71d1a;
            width: 100px;
            height: 100px;
            float: left;

        }

        .item2 {
            background: #ff944f;
            width: 100px;
            height: 100px;
            float: right;

        }

        .item3 {
            background: #e9fd29;
            width: 200px;
            height: 200px;
        }


    </style>
</head>
<body>
<div class="content">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</div>
</body>
</html>

与使用空的元素来清除浮动相比,但是item1会覆盖了item3

给浮动元素容器添加浮动

给浮动元素添加浮动,这样可以清除内部的浮动,但是还会有外部浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 400px;
            background: #1bff18;
            float: left;
        }

        .item1 {
            background: #f71d1a;
            width: 100px;
            height: 100px;
            float: left;

        }

        .item2 {
            background: #ff944f;
            width: 100px;
            height: 100px;
            float: right;

        }

        .content1 {
            background: #e9fd29;
            width: 200px;
            height: 200px;
        }

    </style>
</head>
<body>
<div class="content">
    <div class="item1"></div>
    <div class="item2"></div>
</div>
<div class="content1"></div>
</body>
</html>

使用:after的伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 400px;
            background: #1bff18;
        }

        .item1 {
            background: #f71d1a;
            width: 100px;
            height: 100px;
            float: left;

        }

        .item2 {
            background: #ff944f;
            width: 100px;
            height: 100px;
            float: right;

        }

        .item3 {
            background: #e9fd29;
            width: 200px;
            height: 200px;
        }

        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

    </style>
</head>
<body>
<div class="content clearfix">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</div>
</body>
</html>

与使用空的元素来清除浮动相比,但是item1会覆盖了item3

hzjangel

关注

0
点赞
踩
0

收藏

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

使用带有clear属性的空元素在浮动元素后面使用一个空元素来清除浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { ...
复制链接

扫一扫