float property vs inline-block

Question

我有如下列。使用float property或inline-block是最佳实践吗?

+----------------+--------------------+-------------------+
|     col1       |      col2          |    col3           |
|                |                    |                   |
+---------------------------------------------------------+

浮动属性和显示属性做什么，我应该什么时候使用它们?

Answer 1

使用CSS float，一个元素可以被推到左边或右边，允许其他元素环绕它。

Float通常用于图像，但在处理布局时也很有用。

float

的问题

当你在CSS代码中有浮动的问题是，你需要采取一些预防措施，使周围的元素包围浮动元素，也避免在代码中跟随元素偷偷靠近它。另一个问题是，如果你有一个浮动列表，它将占用几行(从视觉上讲)和内容高低不一，你是在为一个受伤的世界。

这是魔术值inline-block的显示属性开始发挥作用。基本上，它是一种使元素内联的方法，但是保留它们的块功能，比如设置宽度和高度，上下边距和填充等。下面是一个简单的例子这样的:

看到

Answer 2

都不是。浮动通常用于此，因为在IE5时代，这就是我们所拥有的一切。如果你想要等高的列，display: table-cell是你最好的选择。

http://tinker.io/619bf/1

Answer 3

浮动列是更常见和传统的方法。Bootstrap和Foundation都使用float。然而，每种方法都有它的缺点，你想忍受哪些缺点将决定你选择哪条路线。我个人更喜欢inline-block。

漂浮

float更容易设置。如果将此代码添加到这些浮点数的父元素中，它将不会崩溃。

.parent:after {
    display: block;
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

添加到col1, 2和3，使他们浮动，并给他们单独的宽度:

col1, col2, col3 {
    display: block;
    float: left;
}

你也可以考虑添加border-box，这样填充和边框不会使你的网格崩溃。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

float不像inline-block那样有额外的空白问题，所以这是一个合理的选择，但是你不能像在inline-block中那样在没有JavaScript的情况下垂直定位。

Inline-block

内联块有一个空白的问题，你必须解决，但回报是你得到控制元素的垂直定位。而且，inline-block的父元素也不会在它们上面崩溃。

col1, col2, col3 {
    display: inline-block;
    margin-right: -0.25em; //This removes the white space created by the "inline" properties of this display type
    vertical-align: top; //Inline-block naturally aligns to the bottom, so this will give it more expected behavior.
}

您不需要对父元素做任何特殊的操作，也不需要担心其他元素如何与它交互。但这两种方式都是有效的，只有inline-block更有能力。