<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>Document</title>
<!-- 浮动的作用:让块元素并排显示 -->
<!-- 注:如果想要几个块元素并排显示,就全部加上浮动,第二个元素会贴在第一个的右面 -->
<!-- 注:浮动的元素不占位置 -->
<style>
.a{
width: 300px;
height: 300px;
background-color: red;
/* 向左浮动 */
float: left;
}
.b{
width: 300px;
height: 300px;
background-color: green;
float: left;
}
.c{
width: 300px;
height: 300px;
/* 清除浮动对其影响 */
clear: both;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>