网页的布局就分为两大类，第一类就是position，也就是相对布局和绝对布局这一种，还有另外一类是浮动布局，刚不久之前做了个position布局，在这里不写了，现在来讨论下浮动布局更深层次的理解，基本的入们浮动布局在百度有一大堆呢。

 

首先，我们应该知道哪些是块元素，哪些是内联元素。

块元素：div ul li table form等等很多

 

内联元素： input span  strong img a p  b等等吧

 

在这里先介绍下“文档流”这个概念

将窗体子自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。每个非浮动块级元素都独占一行，浮动元素则按规定浮动在行的一端，若当前行容不下了，则另起一行继续浮动

内联元素也不会独占一行。

有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位，但是在IE浮动元素也存在于文档流中。

浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素的周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

基于文档流，我们可以很容易理解一下的定位模式：

    • 相对定位,
      即相对于元素在文档流中位置进行偏移. 但保留原占位.
    • 绝对定位,
      即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移
    • 固定定位,
      即完全脱离文档流, 相对于视区进行偏移.

       

 

只要把文档流一拿出来，把文档流里面的机制搞懂了。布局的原理就会出来了。

不过再这里还是说一下块元素和内联元素之间的区别和转化

 

1.可以使用display=block将行内元素转换成块元素，display=none表示生成的元素根本没有框，也不显示元素，不占用文档中的空间。

2.块元素有行高，width,height,border可言，而内联元素是没有的

3.内联元素是也叫：内联元素，内嵌元素，行内元素，直进式元素

 

 

忘记补充一点：就是IE中块元素浮动双外边距的bug，只要满足三个条件就会出现：

1.块元素

2浮动

3.有外边距

所以只要破坏其中之一就可以了。直接display:inline就可以破解了