<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单列布局</title>
<style>
body{
margin:0;
padding: 0;
}
.header{
width: 100%;
height: 50px;
background-color: green;
}
.main{
width: 90%;
/*height: 500px;*/
background-color: brown;
/* margin-right: auto;往右边推，居左
margin-left: auto; 往左边推，居右*/
margin:5px auto; /*这是简写，上下内边距5px，左右auto居中，重点是块部分水平居中的处理*/
}
.main .left{
width: 30%;
height: 500px;
background-color: pink;
float: left;/*想左浮动到最上层，脱离文档流，下排上移*/
}
.main .right{
width: 69%;
height: 500px;
background-color: deeppink;
float: right;/*right和left效果是一样，浮动后形成一个新的文档流*/
}
.footer{
width: 90%;
height: 60px;
background-color: blueviolet;
margin:0 auto;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
为什么在style中设置.left样式时候用.main .left
而设置.clear样式时直接用.clear
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
用.main .left的优先级更高一些，它明确的告诉你这个样式是main这个类下的left,把范围限定了，可以让浏览器更精准的找到它要渲染的对象。
这是命名，没有一定的要求。随便起啥名都可以啊