CSS的四大布局层级 和 HTML标签的‘生态系统’（三）------文档层和浮动层

标签：bottom   margin   top   效果   解决问题   宽高   它的   清除   pad   

　　文档层，每一个放置内容的元素内部都会有一个文档流的规则，即内部的内容若不是浮动或定位的元素，将会按照从左到右，从上到下的规则来排列，块元素将会独占一行，剩下文本或是行内元素则排满一行，再排下一行。

　　在文档层中，元素或内容摆放位置，主要是通过padding、margin属性来移动位置，其中margin有很多的重点难点，需要去注意，比如marign-top的bug，margin可以设置负值，行内元素没有margin-top和margin-bottom，margin：0 auto居中布局等

　　属性：margin、padding、width、height、border、box-sizing等

　　浮动层，块元素独占一行，行元素不能设置宽高，但是很多布局中都会有横排的元素，并且可以设置宽高，行内块元素倒是可以解决，但是中间会有空格造成的空隙，这个时候，很多情况下，将会使用 浮动-float 来解决问题。float 属性从根本上来说，是破坏了文档流，所有加了浮动属性的元素，都可以横排且设置宽高，但是就像天上的云不在地面上一样，加了浮动的元素，也不再在文档流中了，文档流中的元素“看不到”它，会进入到它的后面（文字，img等除外）。

　　浮动虽然会使我们布局速度加快，能够更快的实现更好的页面效果，但是它需要注意的点也很多，例如：浮动的停止条件（需要像素微调），浮动的子元素撑不开父元素（overflow:hidden）和清除浮动的影响（clear:both），浮动的元素无法使用部分文档流中的布局方法（如：margin:0 auto等）。

　　属性：float、clear

CSS的四大布局层级 和 HTML标签的‘生态系统’（三）------文档层和浮动层

标签：bottom   margin   top   效果   解决问题   宽高   它的   清除   pad   

原文地址：http://www.cnblogs.com/nation-blue/p/6682246.html