首页 > 代码库 > css基础-2 div布局
css基础-2 div布局
div布局
<html>
<head>
<title>div布局 </title>
<meta charset="utf-8">
<style>
.toubu {width:100%;height:100px;background:aqua;}
.zhuti {width:80%;height:600px;background:red;float:left;}
.left {width:20%;height:600px;background:green;float:left}
.dibu {width:100%;height:200px;background:blue;clear:both}
</style>
</head>
<body style=margin:0px;>
<div class="toubu">头部</div>
<div class="left">左边</div>
<div class="zhuti">主题部分</div>
<div class="dibu">底部</div>
</body>
</html>
解释：
1.div标签属于块级元素,自己会独占一行,要想让多个div从左到右排列，需要用到 "浮动"属性。
2.最后一个div需要清除左浮动效果
clear:both;
属性意思为：不允许有浮动对象
3.设置div头部的时候，头部会离浏览器最上边默认或有8px的间距。我们可以通过外边距标签，将8px的空白缝隙取消。
style=margin:0px;
css基础-2 div布局