html - float 和清除...为什么我不能混合/匹配 float :left/right + margin: 0 auto for perfect alignment of 3 elements?

Question

所以，我想我只是无法真正从根本上理解这里发生的事情，我想要一个深入的解释，这样我才能最终理解看似神秘的行为。

我有 3 个 block 元素，它们的宽度和高度都是固定的，我想要一个对齐到屏幕的左侧，一个直接居中，一个在屏幕的右侧。在我的脑海里，我觉得我应该能够做这样的事情:

CSS

div {
    width: 30px;
    height: 30px;
    background: black;
    clear: none;
}

#a {
    float: left;
}

#b {
    margin: 0 auto;
}

#c {
    float: right;
}

HTML

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

但不幸的是，它不起作用。在上面的配置中，第三个元素“c”在页面的右侧，但它被清除到下一行。真的很想知道为什么。

这是一个 fiddle :Fiddle

Answer 1

b 占用了右边的所有可用边距，然后没有可用空间给 c。

<div id="a"></div>
<div id="c"></div>
<div id="b"></div>

只是做了预期的行为，所以简而言之，首先定义你的 float (左，右)，然后是中间部分。

另一种解决方案是使 div 的行为像表格单元格，(display:table-cell) 那么您将需要一个带有 display:table 的父 div:

示例:JSFiddle

注意:这将生成 3 个填充列的布局，我不知道这是您想要的还是您真的想要将这些框分开。