本篇主要介绍浮动属性、清除浮动 以及对于溢出的处理方式。
<!doctype html>
<html>
<head>
<title>Div+Css布局(浮动以及溢出处理)</title>
<meta charset="utf-8">
<style type="text/css">
body{
padding:0;
margin:0;
}
.div{
width:960px;
height:600px;
margin:0 auto; /*居中处理*/
background-color:#f1f1f1;
}
.left{
float:left; /*float:left是左浮动*/
width:260px;
height:460px;
background:#ccc;
}
.right{
float:right;
width:690px;
height:460px;
background:#ddd;
}
.clear{
clear:both; /*clear:both清除浮动*/
}
.bottom{
margin-top:10px;
height:200px;
width:960px;
background:red;
}
.introduction{
width:260px;
height:120px;
background:red;
overflow:auto; /*overflow溢出的处理方式*/
}
</style>
</head>
<body>
<div class="div">
<div class="left">
<div class="introduction">
今天天气真好啊！今天天气真好啊！今天天气真好啊！今天天气真好啊！今天天气真好啊！<br />
今天天气真好啊！<br />
今天天气真好啊！<br />
今天天气真好啊！<br />
今天天气真好啊！<br />
今天天气真好啊！<br />
今天天气真好啊！<br />
今天天气真好啊！<br />
</div>
</div>
<div class="right"></div>
<div class="clear"></div>
<div class="bottom"></div>
</div>
</body>
</html>
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
