用浮点数替换内联块

Question

我已经设法达到了我想要的效果，但是通过使用显示块和显示内联块，这可以在这里看到：

http://jsfiddle.net/vvDJ9/9/

#header h1, #header ul, #header ul li {
    display: inline-block;
}

我想知道是否可以在不使用内联块和块而是使用浮点数的情况下实现相同的效果。

这可能吗？

Answer 1

当然，你可以通过使用浮动来获得相同的效果。

jsFiddle example

将overflow:auto添加到#header：

#header {
    background-color:#1ABC9C;
    overflow:auto;
}

将list-style-type: none;添加到#header ul：

#header ul {
    font-size: 0;
    list-style-type: none;
}

将clear:left添加到#content

#content {
    background-color:#EEEEEE;
    padding: 20px;
    clear:left;
}

将display:inline-block替换为float:left：

#header h1, #header ul, #header ul li {
    float:left;
}