<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ;Single column layout</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; push to the right, stay on the left
margin-left: auto; push to the left, stay on the right*/
margin:5px auto; /*This is the abbreviation, the top and bottom margins are 5px, the left and right auto are centered, the focus is on the horizontal centering of the block part*/
}
.main .left{
width: 30%;
height : 500px;
background-color: pink;
float: left;/*I want to float left to the top layer, break away from the document flow, and move the bottom row up*/
}
.main .right{
width: 69%;
height: 500px;
background-color: deeppink;
float: right;/*right and left have the same effect, forming a new document flow after floating*/
}
.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>
Why use .main .left
when setting the .left style in style and set the .clear style Use .clear
directly when
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Using .main .left has a higher priority. It clearly tells you that this style is left under the main class. It limits the scope and allows the browser to find the object it wants to render more accurately.
This is naming, there are no certain requirements. You can name it whatever you want