一，浮动：float浮动属性；right 左；left 右；
用来定义div页面的布局
具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 浮动和溢出</title>
<style type="text/css">
.div{
width: 960px;
height: 900px;
background-color: antiquewhite;
margin: 0 auto; /* 居中 */
}
.left{width: 300px;
height: 600px;
background-color: #FF0000;
float: left;}
.right{width: 660px;
height: 600px;
background-color: blue;
float: left;}
.bottom{width: 960px;
height: 300px;
background-color: greenyellow;
float:right;}
</style>
</head>
<body>
<div class="div">
<div class="left">
</div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
运行结果如图所示：
二，溢出；
溢出问题就是div容器较小文本内容太多出现内容溢出；如图所示：
overfllow溢出处理 hidden隐藏溢出内容 auto根据文本自动添加滚动条 scroll无论内容是否出层都添加滚动条；
具体代码如图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.yi{
width: 200px;
height: 100px;
background-color: antiquewhite;
overflow: auto; /* hidden隐藏溢出内容 auto根据文本自动添加滚动条 scroll无论内容是否出层都添加滚动条*/
}
</style>
</head>
<body>
<div class="yi">
麦子学院麦子麦子学院麦子学院麦子学院学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院
麦子学院麦子学院麦子学院学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院
</div>
</body>
</html>
运行效果如图所示：
以上效果仅显示auto自动添加滚动条；其它两个效果可以自己尝试；
