清除浮动的几种方式

原本七天的假期,就想着不用带电脑,在老家带一点吃的过来,谁曾想到由于疫情的影响,在老家呆了足足二十多天。我承认手痒了想写代码了,由于最近打算换个工作,就找了一些面试题来刷一刷,希望下一份工作能够满意。

好了,话不多说,开始今天的内容。我们都知道,如果不给外层div设置高度,那么它的高度会被里面的内容撑开,我们经常会遇到这样一种情况,div里面的元素是浮动的,那么,情况就会变得如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>如何清除浮动</title>
    <style>
        .content{
            border: 5px solid red;
        }
        .content .div{
            width: 200px;
            height: 200px;
            float: left;
        }
        .content .div1{
            background: red;
        }
        .content .div2{
            background: green;
        }
        .content .div3{
            background: black;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="div div1"></div>
        <div class="div div2"></div>
        <div class="div div3"></div>
    </div>
</body>
</html>

下面我提供三种方法解决这种问题:

1.在底部新增一个div清除浮动

<div class="content">
   <div class="div div1"></div>
   <div class="div div2"></div>
   <div class="div div3"></div>
   <div class="clear"></div>
</div>
.content .clear{
    clear: both;
 }

当然,这种方法最致命的缺点就是,多了一个div,会增加渲染的开销。

2.在父元素添加overflow: hidden;

 .content{
     border: 5px solid red;
     overflow: hidden;
  }

3.通过给父元素添加after伪类(推荐方法)

.content:after{
    content: '';
    clear: both;
    display: block;
}

 

清除浮动有以下几种常见方式: 1. **浮动元素后加空标签并设置`clear: both`**:在浮动元素末尾添加一个空的标签,再给空标签添加清除浮动的样式`clear: both`。例如: ```html <style> .box { width:500px; height:500px; border:2px solid black; } .box-item { float:left; width:200px; height:200px; border:2px solid red; } .clear{ clear:both; } </style> <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> <div class="clear"></div> </div> ``` 这种方式是以前主要使用的清除浮动方法,但会增加页面的标签,造成结构的混乱,一般情况下不常用 [^1][^2][^3]。 2. **父级`div`定义`overflow: auto`**:给父元素添加`overflow: auto`样式来清除浮动 [^2]。 3. **父元素添加`overflow: hidden`**:为父元素设置`overflow: hidden`属性,也可以实现清除浮动的效果 [^3]。 4. **利用`clear: both`在后续元素中清除**:若没有特定的父元素,可在浮动元素之后的元素上设置`clear: both`来清除浮动。例如: ```html <style type="text/css"> .left{ background: blue; float: left; height: 100px; width:40%; } .right{ background: pink; float: right; height: 100px; width:50%; } .footer{ clear: both; background: orange; height: 50px; } </style> <div class="left">Left</div> <div class="right">Right</div> <div class="footer"></div> ``` 这种方式直接在后续元素上处理浮动问题 [^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值