来看看：CSS浮动结构基本

可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。
基于浮动的结构使用了float（浮动）属性来并排定位元素，并在网页上创立列。能够使用这个属性来创立一个围绕在四周的效果，比方围绕在照片四周，可是当你把它使用到一个<div>标签上时，浮动就酿成了一个壮大的网页结构工具。float属性把一个网页元素挪动到网页（大概其他包括块）的一边。任何显现在浮动元素下方的HTML都在网页中上移，并围绕在浮动四周。

登录/注册后可看大图

　　float属性承受3种分歧值之一：left（左）、right（右）和none（无）。要把一张图片移到网页的右侧，能够创立这个类款式，并把它使用到<img>标签上：

.floatRight{float:right;}
　　不异的属性使用到一个充斥内容的<div>标签上也能够创立一个工具条：

#sidebar{
float:left;
width:170px;}
　　1-3展现了这两个款式的感化。

　　注重：none值封闭了任何浮动，把元素像一个一般的没有浮动的元素一样定位。这只要已使用到元素的浮动有效时才有效。你大概有一个使用了特定类如“sidebar”的元素，这个元素浮动到右侧。但在网页中，你大概要带有这个类的元素不要浮动，可是又要安排在网页流以内，就如这个“注重”方框。经由过程用float:none创立一个更详细的CSS选择器能够避免这个元素浮动。

登录/注册后可看大图

　　如1-3的一个复杂的两列计划只必要几个步骤。

　　1.把每列都包抄在一个带有ID大概class属性的<div>标签内里。

　　在1-3中，列在右边工具条中的旧事项目被包抄在一个<div>内里――<divid="news">，而且主内容在另外一个div内里――<divid="main">。

　　2.把工具条<div>浮动到右侧大概右边。

　　当你利用浮动时，源按次（增加HTML到一个文件的按次）很主要。浮动元素的HTML必需显现在要包抄它的元素的HTML后面。

　　1-4展现了3个两列的计划。右边的图表展现了网页HTML的源按次：给banner的一个<div>，前面随着sidebar的<div>，最初是maincontent的<div>。在右侧，你能够看到实践的网页结构。在HTML中sidebar在maincontent后面，因而它能够浮动到右边（上图，下图）大概右侧（中图）。

登录/注册后可看大图

　　3.给浮动的sidebar设定一个宽度。

　　除非你正浮动一张带有预设宽度的图片，不然你应当一直给浮动设定一个宽度。如许，给浮动元素创立一个流动的尺寸，使扫瞄器给其他内容腾出了包抄该地位的空间。
　　这个宽度多是一个流动的尺寸好比170px大概10em。你也能够对基于扫瞄器窗口宽度的弹性计划利用百分比。假如sidebar是20%宽，扫瞄器窗口是700px宽，那末sidebar将是140px宽。可是假如会见者调剂窗口尺寸为1000px，那末sidebar也增年夜为200px。流动宽度的sidebar更简单计划，由于你不用思索sidebar舒展时的一切分歧宽度。但是，百分比让你在两列之间坚持不异的比例，可使其更悦目。
　　注重：当全体的网页计划是一个流动宽度时，sidebar的百分比宽度值也取决于包括元素的流动宽度。这个宽度不取决于窗口尺寸，当扫瞄器窗口改动尺寸时它不会产生改动。

　　4.给maincontent增加一个右边距。

　　假如sidebar比网页上的其他内容更短，来自立列的文本包抄sidebar的下方，损坏了两个并分列的展示效果。增加一个右边距即是大概年夜于缩进网页次要内容的sidebar宽度，发生一个第二列的幻觉效果：

#main{margin-left:180px;}
　　特地说一下，使右边距比sidebar的宽度略年夜一般是个好主张：如许发生了一些空的空间――一个红色的――在两个元素之间。因而，当使用百分比来设定sidebar的宽度时，给右边距设定一个略微年夜一些的百分比值。

　　没有需要往制止给maincontent的div计划宽度，由于扫瞄器只需扩展到合适现有的空间。即便要一个流动宽度的计划，也不用给主内容的div计划宽度，就如你将鄙人一节中所看到的。

在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？