html清除float浮动效果

在前台页面上我们想要设置一个浮动,假如说有三个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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值