css清除浮动的两种常用方式(一)

最新推荐文章于 2024-07-21 22:38:03 发布

LoserYa

最新推荐文章于 2024-07-21 22:38:03 发布

阅读量191

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/LAN961205/article/details/89742177

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css清除浮动的两种常用方式(一)

1 使用一个没有宽高的类名为clear的div来清除

1 没有清除浮动前(下方的橙色div直接窜到上边)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试清除浮动</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            margin: 10px;
            background-color: lightskyblue;
        }
        .box {
            float: left;
        }
        .clear {
            /*前三行只是覆盖前边的样式*/
            height: 0px;
            width: 0px;
            margin: 0px;
            clear: both;
        }
        .last {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <!--<div class="clear"></div>-->
    <div class="last"></div>
</body>
</html>

在这里插入图片描述

2 使用了一个类名为clear的宽高为0的div清除浮动后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试清除浮动</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            margin: 10px;
            background-color: lightskyblue;
        }

        .box {
            float: left;
        }

        .clear {

            /*前三行只是覆盖前边的样式*/
            height: 0px;
            width: 0px;
            margin: 0px;
            clear: both;
        }

        .last {
            background-color: orange;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="clear"></div>
    <div class="last"></div>
</body>
</html>

在这里插入图片描述

3 把那个用于清除的div的宽高设置为2px查看他的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试清除浮动</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            margin: 10px;
            background-color: lightskyblue;
        }

        .box {
            float: left;
        }

        .clear {

            /*前三行只是覆盖前边的样式*/
            height: 2px;
            width: 2px;
            margin: 0px;
            clear: both;
        }

        .last {
            background-color: orange;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="clear"></div>
    <div class="last"></div>
</body>
</html>

在这里插入图片描述

LoserYa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css清除浮动的两种常用方式(一)

css清除浮动的两种常用方式(一)1 使用一个没有宽高的类名为clear的div来清除1 没有清除浮动前(下方的橙色div直接窜到上边)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试清除浮动</title&gt...
复制链接

扫一扫

专栏目录