用Float还是Inline-Block

如何让块元素能够像行元素一样的显示，我相信这是前端人员经常碰到的问题，如我们的流模式布局，就是以此为基础，

Float

我们首先应该搞清楚一件事，那就是对于浮动元素来讲，为什么会有浮动这种方式。最初的概念是为了text-wrapping。创意的来源是让一个block元素例如一张图片，把它设为居左或者是居右，同时让文字环绕它。尽管我们把float非常多的用在别处，尽管它是一种非常有效的方式来显示整个document的所有element.但是这也是一种对原先动机的扩展应用。不过对于这些扩展应用，我们应当采取一些预防措施，来确保我们的页面将会显示正常的显示。

 

主要的显示问题是，当我们浮动一个元素时，它的父元素将不会承认浮动的元素，这也就意味着，它们的父元素，不会相应的来调整本身的尺寸。

第2个问题是，你不能让浮动元素居中。如果你有一个list，你想让每个项都在你的document中居中，而你又浮动了这些list item,所以你必须设置这些item的宽度，来使它们居中的下确。这就意味着我们不能动态的确定整个list.

 

解决你高度的办法：

1.float every thing:不过，这也是一是不太好的方法，主要问题是当你添加一些额外的插件的时候，而这些插件又是inline CSS.

2.clear fix:你需要在父元素中增加一个额外的空元素来清除里边的元素的float.

3.overflow: 这是一种优雅的方式，你只需要在你元素中添加一个

{

　　Overflow: hidden;

}

 

Inline-Block:

IE7和以前的版本不支持此元素，它们会把它当做inline元素。Inline-block元素会保留在block元素状态上，它们表现的会像是一个block元素那样，但是它们会保持在一行内，而不管它们在水平方向上所占的空间。当然还需要用一些额外的CSS来让inline-block显示的像一个真正的"inline"元素。

对于inline-block元素来说vertical-align又是另外一个问题。所以你要用"vertical-align"。当然inline-block也是有问题的，它会把真正html中的tab，回车以及空格当成inline元素来显示.

 

IE7及以前的版本可以用以下代码来修复：display:inline;

 

Inline-block元素之间的空格问题：

<ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul>