清除浮动的几种方式

最新推荐文章于 2024-07-08 14:25:11 发布

原创最新推荐文章于 2024-07-08 14:25:11 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

7 篇文章

订阅专栏

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

好了，话不多说，开始今天的内容。我们都知道，如果不给外层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;
}