1.float属性
float可以使元素向左或向右移动，其周围的元素也会重新排列。经常用于图像或者布局。本文通过示例来讲解float的使用方法。看以下代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
h3{
font-family:Serif;
font-size:80px;
font-style:oblique;
color:green;
}
span{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
.par {
width: 200px;
height:150px;
margin:5px;
float:right;
}
.son{
color:green;
position:absolute;
left:80px;
top:150px;
}
</style>
</head>
<body>
<h3><center>float使用示例</center></h3>
<p>
<div width="800">
<img class="par" src="img/1.jpg" width="200" height="145">
<img class="par" src="img/2.jpg" width="200" height="145">
<img class="par" src="img/3.jpg" width="200" height="145">
<img class="par" src="img/4.jpg" width="200" height="145">
<img class="par" src="img/5.jpg" width="200" height="145">
<img class="par" src="img/6.jpg" width="200" height="145">
<div>
<span>Float</span>（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
</p>
</body>
</html>运行如下图所示：
以上使用了float属性，取值为left，则向左浮动；取right则向右浮动。将代码中类选择器.par中的float值取为left，则网页更改如下：
2.clear属性
clear属性，则表示不使用当前块取消float，clear属性指定元素两侧不能出现浮动元素。
<!DOCTYPE html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
h3{
font-family:Serif;
font-size:80px;
font-style:oblique;
color:green;
}
span{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
.par {
width: 200px;
height:150px;
margin:5px;
float:left;
}
.son{
color:green;
position:absolute;
left:80px;
top:150px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<h3><center>float使用示例</center></h3>
<p>
<div width="800">
<h2>第一组图</h2>
<img class="par" src="img/1.jpg" width="200" height="145">
<img class="par" src="img/2.jpg" width="200" height="145">
<img class="par" src="img/3.jpg" width="200" height="145">
<h2 >第二组图</h2>
<img class="par" src="img/4.jpg" width="200" height="145">
<img class="par" src="img/5.jpg" width="200" height="145">
<img class="par" src="img/6.jpg" width="200" height="145">
<div>
<span>勒布朗</span>·詹姆斯（LeBron James），1984年12月30日出生在美国俄亥俄州阿克伦，美国职业篮球运动员，司职小前锋，绰号“小皇帝”，效力于NBA克利夫兰骑士队。
勒布朗·詹姆斯在2003年NBA选秀中于首轮第1顺位被克利夫兰骑士队选中。2003-2010年，詹姆斯效力于骑士队，期间2次当选NBA最有价值球员（MVP）。2010年，詹姆斯转会至迈阿密热火队，与德怀恩·韦德、克里斯·波什组成“三巨头”阵容。2012年，詹姆斯得到NBA个人生涯的第3座常规赛MVP，第1个总冠军和总决赛MVP。詹姆斯代表美国男篮获得了2012年伦敦奥运会金牌，追平了迈克尔·乔丹在1992年所创的纪录。2013年，詹姆斯获得第4个常规赛MVP、第2个NBA总冠军和第2个总决赛MVP，实现两连冠。2014年，詹姆斯回归骑士，与凯里·欧文、凯文·乐福组成“三巨头”阵容。2016年，詹姆斯带领骑士逆转战胜卫冕冠军勇士获得队史首个总冠军和个人第3个总决赛MVP。
</p>
</body>
</html>效果如下，可以看出三张图浮动之后，那文字便会重新排列：
为了不让元素进行重新排列，需要引用clear属性，代码如下：
以下对代码进行添加对界面进行优化，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
h3{
font-family:Serif;
font-size:80px;
font-style:oblique;
color:green;
}
span{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
.par {
width: 200px;
height:150px;
margin:5px;
float:left;
}
.son{
color:green;
position:absolute;
left:80px;
top:150px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<h3><center>float使用示例</center></h3>
<p>
<div width="800">
<h2>第一组图</h2>
<img class="par" src="img/1.jpg" width="200" height="145">
<img class="par" src="img/2.jpg" width="200" height="145">
<img class="par" src="img/3.jpg" width="200" height="145">
<h2>个人简介</h2>
<span>勒布朗</span>·詹姆斯（LeBron James），1984年12月30日出生在美国俄亥俄州阿克伦，美国职业篮球运动员，司职小前锋，绰号“小皇帝”，效力于NBA克利夫兰骑士队。
勒布朗·詹姆斯在2003年NBA选秀中于首轮第1顺位被克利夫兰骑士队选中。2003-2010年，詹姆斯效力于骑士队，期间2次当选NBA最有价值球员（MVP）。2010年，詹姆斯转会至迈阿密热火队，与德怀恩·韦德、克里斯·波什组成“三巨头”阵容。2012年，詹姆斯得到NBA个人生涯的第3座常规赛MVP，第1个总冠军和总决赛MVP。詹姆斯代表美国男篮获得了2012年伦敦奥运会金牌，追平了迈克尔·乔丹在1992年所创的纪录。2013年，詹姆斯获得第4个常规赛MVP、第2个NBA总冠军和第2个总决赛MVP，实现两连冠。2014年，詹姆斯回归骑士，与凯里·欧文、凯文·乐福组成“三巨头”阵容。2016年，詹姆斯带领骑士逆转战胜卫冕冠军勇士获得队史首个总冠军和个人第3个总决赛MVP。
<h2 class="clear">第二组图</h2>
<img class="par" src="img/4.jpg" width="200" height="145">
<img class="par" src="img/5.jpg" width="200" height="145">
<img class="par" src="img/6.jpg" width="200" height="145">
<div>
<h2>童年时期</h2>
1984年，勒布朗·詹姆斯出生在美国俄亥俄州克里夫兰胡桃树大街的一栋房子里，他的母亲格利亚·詹姆斯当时16岁，她从来没有透露过詹姆斯的生父。詹姆斯出生后，和母亲一起住在外婆家。那是俄亥俄州阿肯山胡桃木街一栋外婆租来的老房子里，那里是贫民区。她们经常交不起房租。在詹姆斯三岁时圣诞节的清晨，格利亚和男友埃迪给勒布朗买了一套篮球装置玩具。这个晚上，勒布朗42岁的外婆弗雷达死于突发心脏病。5岁到8岁的那几年，詹姆斯搬过12次家。[1] 直到1995年，格利亚终于在斯普林山公寓租下一栋有两个卧室的房子。
1993年，勒布朗经常到阿肯南部的一支橄榄球队下面的青少年队去玩。教练沃克看中他，于是勒布朗留下来为这支球队打球，3年之后，勒布朗的左手在一次比赛中受伤了。詹姆斯后来表示打橄榄球是因为穷，是为了摆脱贫穷。[2] 这之前，勒布朗已经喜欢上了篮球。沃克在一次家访中发现勒布朗和母亲四处流浪，沃克说服格利亚把勒布朗接到他的家中。詹姆斯称：“我爱弗兰克（沃克）夫妇，没有他们，就绝对不会有我的今天。”
</p>
</body>
</html>效果如下：
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
