Inline style issue
<!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
