<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 38px; background: #dddddd; line-height: 38px; } </style> </head> <body style="margin:0 auto;"> <div class="pg-header"> <div style="float: left">收藏</div> <div style="float: right"> <a>登录</a> <a>注册</a> </div> </div> <div style=" 300px;border: 1px solid red"> <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div> <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div> <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div> <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div> <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div> <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div> <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div> <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div> <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div> <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div> <div style="clear:both"></div> </div> </body> </html>
float：
让标签浪起来：块级标签也可以堆叠
父级标签管理子标签
<div style="clear:both"></div>
<body style="margin:0 auto;"> 使页面头贴近边框