左浮动
<html>
<head>
<title>float属性</title>
<styletype="text/css">
<!--
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:1pxsolid#111111;
padding:25px; /* 父块的padding */
}
.son1{
padding:10px; /* 子块son1的padding */
margin:5px; /* 子块son1的margin */
background-color:#70baff;
border:1pxdashed#111111;
float:left; /* 块son1左浮动 */
}
.son2{
padding:5px;
margin:0px;
background-color:#ffd270;
border:1pxdashed#111111;
}
-->
</style>
</head>
<body>
<div class="father">
<div class="son1">float1</div>
<div class="son2">float2</div>
</div>
</body>
</html>
右浮动：
<html>
<head>
<title>float属性</title>
<styletype="text/css">
<!--
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:1pxsolid#111111;
padding:25px; /* 父块的padding */
}
.son1{
padding:5px;
background-color:#70baff;
border:1pxdashed#111111;
}
.son2{
padding:5px; /* 子块son2的padding */
margin:5px;
background-color:#ffd270;
border:1pxdashed#111111;
float:right; /* 子块son2向右浮动 */
}
-->
</style>
</head>
<body>
<div class="father">
<div class="son1">float1</div>
<div class="son2">float2</div>
</div>
</body>
</html>
两个一起浮动
<html>
<head>
<title>float属性</title>
<styletype="text/css">
<!--
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:1pxsolid#111111;
padding:25px; /* 父块的padding */
}
.son1{
padding:5px;
margin-right:3px; /* 子块son1的右margin */
background-color:#70baff;
border:1pxdashed#111111;
float:left; /* 子块son1向左浮动 */
}
.son2{
padding:5px;
background-color:#ffd270;
border:1pxdashed#111111;
float:left; /* 子块son2也向左浮动 */
width:60%;
}
-->
</style>
</head>
<body>
<div class="father">
<div class="son1">float1</div>
<div class="son2">CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</div>
</div>
</body>
</html>
clear 清除浮动
<html>
<head>
<title>float属性 clear</title>
<styletype="text/css">
<!--
body{
margin:5px;
font-family:Arial;
font-size:13px;
}
.block1{
padding-left:10px;
margin-right:10px;
float:left; /* 块1向左浮动 */
}
h3{
background-color:#a5d1ff; /* 标题的背景色 */
border:1pxdotted#222222; /* 标题边框 */
clear:left; /* 清除float对左侧的影响 */
}
-->
</style>
</head>
<body>
<div class="block1"><img src="building2.jpg" border="0"></div>
<div>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</div>
<h3>CSS的概念</h3>
<div>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</div>
</body>
</html>
清除两边的浮动
<html>
<head>
<title>float属性 clear</title>
<styletype="text/css">
<!--
body{
margin:5px;
font-family:Arial;
font-size:13px;
}
.block1{
padding-left:10px;
margin-right:10px;
float:left; /* 块1向左浮动 */
}
.block2{
padding-right:10px;
margin-left:10px;
float:right; /* 块2向右浮动 */
}
h3{
background-color:#a5d1ff; /* 标题的背景色 */
border:1pxdotted#222222; /* 标题边框 */
clear:both; /* 清除两端的float影响 */
}
-->
</style>
</head>
<body>
<div class="block1"><img src="building2.jpg" border="0"></div>
<div>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。<br><br></div>
<div class="block2"><img src="building3.jpg" border="0"></div>
<div>CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</div>
<h3>CSS的概念</h3>
<div>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</div>
</body>
</html>
