原本七天的假期，就想着不用帶電腦，在老家帶一點吃的過來，誰曾想到由於疫情的影響，在老家呆了足足二十多天。我承認手癢了想寫代碼了，由於最近打算換個工作，就找了一些面試題來刷一刷，希望下一份工作能夠滿意。
好了，話不多說，開始今天的內容。我們都知道，如果不給外層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;
}