html清除float浮动效果

hfloves

已于 2022-03-24 17:34:31 修改

阅读量528

点赞数

分类专栏：前端学习文章标签： html5 html 前端

于 2022-03-24 17:29:39 首次发布

本文链接：https://blog.csdn.net/qq_36572358/article/details/123716089

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在前台页面上我们想要设置一个浮动，假如说有三个div，我们想要把其中两个div放在同一排。应该怎么去做呢？

由于div是块级元素，也就是每个div，都会独占一行，为了让两个div显示在同一行上，我们可以选择浮动(float)的方式，如果采用了浮动方式，那么就相当于把这两个div设置为行级元素，如果不清除的话，第三个div再次进入页面的时候就会占用这两个div的位置。

如果没有清除float，我们想要将第三个div放在两个同一行的div下面的期望就有可能无法实现
就会变成这个样子
正确的使用方式是在第三个div的style里面加上clear来清除掉之前的浮动。

clear:both;

最后我将举个例子来实现这部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style type="text/css">
        
        div{
            border: 1px solid darkred;
        }
        .left{
            width: 40%;
            height: 500px;
            float: left;
        }
        .right{
            width: 59%;
            height: 500px;
            float: left;
        }
        .footer{
            /*清除浮动效果*/
            clear: both;
            width: 100%;
            background: yellow;
        }
    </style>

</head>
<body>
    <!-- 顶部两个个div放在同一排 -->
   
    <div>
        <div class="left">left</div>
        <div class="right">center</div>   
    </div>

    <!-- 底部div -->
    <div class="footer">
        footer
    </div>
</body>
</html>

在这里插入图片描述