层叠式样表（CSS）正迅速成为
通常，Web开发者往往无法理解式样表的这个非凡问题，导致要在代码中使用大量的“hack”才能获得预期的结果。为解决这个问题，很值得花一些
本文
浮动元素
基本上，一个属性为float的元素移出了网页的正常流程以外，它在空间“飘浮”，四周环绕着一些内容。因此，一个向左浮动的元素有文本在它的右侧
float属性可以取三个可能的值：left，使元素向左浮动；right，使元素向右浮动；none，消除浮动。对一个元素应用float属性会自动将它转变成一个块级元素。其它非式样元素忽略浮动，就似乎它不存在一样。假如一个浮动撞上文件中在前面生成的同一侧的另一个浮动，它必须要么保持向前面生成的浮动右侧浮动（假如有足够的空间），要么在它下面浮动（假如空间不够）。
例1：在图像四周环绕文本
为了更好的理解浮动，我们来看一个简单的例子：用CSS的float属性代替HTML的ALIGN属性。查看下面的例子（列表A），它向左浮动一幅
列表A
<html>
<head>
<style type="text/css">
.floater {
float: left;
border: solid 1px black;
padding: 5px;
margin: 5px;
width: 100px;
height: 75px;
}
</style>
</head>
<body>
<img class="floater" src="pix2180.jpg" />
Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum. Loremipsumdolor sitamet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
评论加载中…
 |