清除浮动的三种方式
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了清除浮动的三种方式相关的知识，希望对你有一定的参考价值。
清除浮动的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 清除浮动</title>
<style>
.son_1
float: left;
width: 300px;
height: 200px;
background-color: greenyellow;
.son_2
float: left;
width: 300px;
height: 200px;
background-color: skyblue;
.info
width: 300px;
height: 400px;
background-color: gray;
/* 第三种 */
.son_3
clear: both;
/* 第二种 */
.one::after
content: '';
/* 必须写成块级元素 */
display: block;
/* 我又不需要看见这个元素,对布局不会又=有影响 */
height: 0;
/* 核心代码 */
clear: both;
/* 隐藏掉这个盒子 */
visibility: hidden;
/* 第三种 */
.one::after,
.one::before
content: '';
/* 控制表格在一行 */
display: table;
.one::after
clear: both;
</style>
</head>
<body>
<div class="one">
<div class="son_1"></div>
<div class="son_2"></div>
<!-- <div class="son_3"></div> -->
</div>
<div class="info">
</div>
</body>
</html>
以上是关于清除浮动的三种方式的主要内容，如果未能解决你的问题，请参考以下文章