<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ;單列版面配置</title>
<style>
body{
margin:0;
身體：0;
}
.header{padding: 0;
}
%;
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%;
1 : 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;
background-color: blueviolet;
margin:0 auto;
##. clear{
clear: both;
}
# </style>
<body>
<div class="header"<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###
用.main .left的優先權更高一些，它明確的告訴你這個樣式是main這個類別下的left,把範圍限定了，可以讓瀏覽器更精準的找到它要渲染的物件。
這是命名，沒有一定的要求。隨便起啥名都可以啊