CSS的float和position

CSS改变了网页的设计主要体现在两方面：

（1）使人们可以轻松地改变各种元素的样式，比如字体、颜色、背景颜色等等。

（2）使人们可以轻松滴改变网站原有的布局，如三列布局的网站，我们只需改动一点点代码就能改变这三列从左到右的顺序。

 

　　之前的几篇CSS随笔，其实都是讲述第（1）点的。对于第（2）点，CSS又是如何去为我们提供这种便利的呢？

　　CSS2布局的原理：通过指定box相对于父亲容器、其他容器、浏览器窗口的位置来定位的。而平时我们所见的float，其实严格意义上来讲不是布局。它是在CSS1中添加新来的，源于netscape浏览器。

float

　　从netscape1开始，float便用来定义图片<img src="img.jpg" align="right"/>，它会使图片浮动到右边，并且使其他元素比如文字围绕该图片。以前float只能用来浮动图片或者在其他浏览器中可以用来浮动表格。在CSS中，float可以用来浮动任何元素。

　　对于被浮动的元素，我们要时刻注意几点：

（1）元素被浮动后，浏览器实际上将它渲染到一个专门为float元素准备的plane中了。也就是说它从普通文档流中脱离了出来。

（2）虽然已经从普通文档流中脱离出来了，但是它还任然会影响普通文档流中的其他元素的布局。这是因为其他元素要围绕着它，就像对一张图片浮动后，其他文字要围绕着它一样。

（3）浮动元素的margin不会出现margin-collapse现象。

（4）如果你要对一个nonrepeacted元素要应用float，那么你必须要为其指定width。在CSS说明书中，我们可以得知，如果不为nonreplacted元素指定width，那么浏览器会以最小宽度  （一个字符的宽度）显示该元素。对于replaceted元素（如image,input），我们是不需要指定width就可以为它浮动的。

（5）任何被float的元素，都会生成一个block box。比如，对于Inline元素，本应该生成的是inline box，但是一旦它被浮动，它就会和box leave元素一样，生成block box。所以任何要被浮动的元素，我们无需再为他display:block。因为这是多此一举。

（6）