清除浮动的三种方案
- [1. 第一种方案（overflow: hidden）](#1. 第一种方案（overflow: hidden）)
- [2. 第二种方案（clear：both）](#2. 第二种方案（clear：both）)
- [3. 第三种方案（为元素）](#3. 第三种方案（为元素）)
1. 第一种方案（overflow: hidden）
html
<style>
.container {
background-color: bisque;
/* 清除方案 */
overflow: hidden;
}
.inner {
width: 50px;
height: 50px;
background-color: cadetblue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>2. 第二种方案（clear：both）
html
<style>
.container {
background-color: bisque;
}
.inner {
width: 50px;
height: 50px;
background-color: cadetblue;
float: left;
}
// 清除方案
.side {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
<div class="side"></div>
</div>
</body>3. 第三种方案（为元素）
html
<style>
.container {
background-color: bisque;
}
// 清除方案
.container::after {
content: "";
display: table;
clear: both;
}
.inner {
width: 50px;
height: 50px;
background-color: cadetblue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>示例：
