DIV+CSS布局之解读浮动定位

DIV+CSS布局学习笔记之四解读浮动定位

     这是CSS布局的一个重要组成部分，利用CSS布局只有2种：其一就是浮动式布局，另一种是定位布局。

     首先要明白一个概念，文档流 Document Flow：文档流是浏览器解析网页是一个重要概念，在XHTML网页中，各个元素都是按照其前后顺序，组成了一个个的上下关系，这就是文档流。文档流是浏览器的默认显示规则。

    而浮动布局的原理，就是要打破文档流的显示规则，把元素按照我们需要的方式显示出来。那么如果按照文档流的方式，我们定义3个DIV A B C，因为DIV是块状元素，本身是要占据一行的。所以这3个DIV的显示应该是，按照前后顺序，组成一个上下关系。A 一排，B一排，C一排，顺序显示出来。

   当A浮动到左边的时候，右侧就被清空，所以b 就可以移动上一层，来到a所在行，但是因为A已经占据了这里的位置，所以B只能顺序排列在A的后面，B紧贴A。而C继续显示在第二行。

           同理，如果把A 浮动到右边，那么左边的文档就被清除，所以B就会移动上来一排，在同排显示，而C还在第二排。

    就是说在一行中，只能有一个块状元素，其余的按照文档流的显示规则顺序显示下去。浮动也就是打破了文档流的现实规则。当A浮动的时候，就不在此文档流规范所，所以此行可以顺序显示另一个 DIV，依次的DIV会顺序显示。当A、B同时浮动的时候，C元素也同样顺序显示在同一行（前提是各DIV宽度合适） 所以，在布局的时候合适的利用文档流属性，和浮动的属性可以自由的进行DIV的布局。

    如果当A B C 都具有浮动属性的时候float:left; 那么他们都会在一行上显示，但如果A B C 的宽度不能完全显示，那么会自动下移一行显示。 这个时候如果A B的高度不一致的话，会产生错位的，那么利用这样的错位我们可以轻易的实现图文混排。文字环绕的效果。