CSS之页面布局之一（浮动布局）

浮动布局是非常经典常见的页面布局方式。

实现方式很简单，第一步先设置需要浮动起来的元素的宽度width。第二步设置该元素的浮动属性float

（浮动属性float可参阅W3C：http://www.w3schools.com/cssref/pr_class_float.asp）

下图是页面初始HTML流：



为了将红框部分浮动起来，需要分两步，第一步就是设置该元素的宽度width

#floatLayout {
width: 200px;
}

设置宽度后页面如下图：



第二步是设置浮动属性float，将该元素浮动到页面右边

#floatLayout {
width: 200px;
float: right;
}

设置居右浮动后页面如下图：



浮动元素将浮动到页面右边（当然你也可以设置成居左浮动）。

HTML端定义在浮动元素下面的块元素将无视浮动元素，仿佛HTML流内被浮动起来的元素消失了一样。但内联元素（如块元素内的文本）将像流水一样围绕着浮动元素。

另外有个注意点，如果浮动元素过长，可能会影响到本部想被影响的部分（如页面的footer，footer里的内联元素将像流水一样围绕着浮动元素）：



你可以设置clear属性，使元素周围不能有浮动元素，代码和效果图如下：

#footer {
clear: right;  //右边不能有浮动元素
}

总结：

元素被浮动起来后，html端所有定义在该元素下面块元素将无视浮起来的元素，但内联元素会像流水一样围绕着浮动元素。

由于html端定义在浮动元素上面的元素不受影响。如果要浮动元素上面某元素也围绕浮动元素，只能调整html端定义的顺序

补充两个细节：

1.因为块元素将无视浮起来的元素，所有浮动元素的外边距不会和正常流中的元素的外边距发生折叠

2.

比如html端定义：

<div id=“main”>。。。</div>
//内含页面主内容

<div id=“float”>。。。</div>
//内含需要浮动起来的内容

要想让main围绕着浮动元素，只能在html端调整两个div的上下顺序。（如果你不在意HTML端元素摆放的上下顺序的话，这其实也谈不上是个缺点）

你可能提出另一个方案，即让mian浮动起来，这样html端就不用调整顺序了。

但请注意，要浮动需要设置width，而main一旦设死了width，浏览器宽度变化时，main将不改变宽度，通常这会使得页面看起来将很糟糕。