一、浮动
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 |
默认值。允许浮动元素出现在两侧 |