html - 清除 : both overrides margin: 0 auto?

Question

我有一个定位问题需要处理。在容器 div 中，我有两个 div，它们都应该水平居中。但是，我在定位第二个 div 时遇到了问题。

如果我添加 clear:both div 2 得到一个新行，这是需要的。但是，如果使用 clear:both margin: 0 auto;不起作用。我可以使用什么来使 div 居中？

HTML:

<div class="row-fluid">
    <div class="span6 offset3 text-center header">
        <h1>Title...</h1>
        <p>Text...</p>
    </div>
    <div class="span3 offset4">
        <form>
          ...
        </form>                 
    </div>
</div>

CSS:

.register .span3 {
    width: 270px;
    clear: both;
    margin: 0 auto;
}

输出:

- Without clear:both
 ____________________________________
|                                    |
|              ______       ______   |
|             |      |     |      |  |
|             | div 1|     | div 2|  |
|             |______|     |______|  |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |


- WITH clear:both
 ____________________________________
|                                    |
|              ______                |
|             |      |               |
|             | div 1|               |
|             |______|               |
|  ______                            |
| |      |                           |
| | div 2|                           |
| |______|                           |
|                                    |
|                                    |

- Desired output
 ____________________________________
|                                    |
|              ______                |
|             |      |               |
|             | div 1|               |
|             |______|               |
|              ______                |
|             |      |               |
|             | div 2|               |
|             |______|               |
|                                    |
|                                    |

Answer 1

当你不漂浮的时候为什么需要clear？ clear 仅适用于 float 情况。

如果您删除 clear:both 并仅插入 margin:0 auto ，则两个 div 都将在页面上居中，如您所愿，一个在另一个下方。