一、浮动
float属性
| 属性值 |
说明 |
| left |
元素向左浮动 |
| right |
元素向右浮动 |
| none |
默认值；元素不浮动，并会显示在其文本中出现的位置 |
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#header{background-color: green;}
#mainLeft{
width:30%;
background-color: yellow;
float:left;
}
#mainRight{
width:70%;
background-color: pink;
float:left;
}
#footer{
background-color: green;
clear:both;
}
</style>
</head>
<body>
<div id="total">
<div id="header">兰心餐急送定餐网站</div>
<div id="main">
<div id="mainLeft">早餐 午餐 晚餐<br>
早餐 午餐 晚餐<br>
早餐 午餐 晚餐
</div>
<div id="mainRight">早 午 晚</div>
</div>
<div id="footer">版权所有兰心餐急送有限公司</div>
</div>
</body>
</html>
二、overflow（溢出处理）
| 属性值 |
说明 |
| visible |
默认值。内容不会被修剪，会呈现在盒子之外 |
| hidden |
内容会被修剪，并且其余内容是不可见的 |
| scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 |
| auto |
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:100%;
height:200px;
background-color: green;
overflow: auto;
}
</style>
</head>
<body>
<div id="div1">
<font style="font-size:80px">
周六了。
</font>
</div>
</body>
</html>
三、清除浮动
| 值 |
说明 |
| left |
在左侧不允许浮动元素 |
| right |
在右侧不允许浮动元素 |
| both |
在左、右两侧不允许浮动元素 |
| none |
默认值。允许浮动元素出现在两侧 |