Html 网页水平对齐的最佳解决方案？

朋友们

我决定问这个问题，因为我在网上看到了很多答案，但似乎没有一个答案是确定的

在out HTML文档中，我们有许多元素，每个元素都包含在另一个元素中。最终，我们将希望为这些元素添加填充和边距

那么，如果我们想让所有内容水平对齐到页面中心，该怎么办？如果内容的宽度为1000px，并且屏幕分辨率会随着设备的不同而变化，最常见的解决方案是（将在基于netscape的浏览器上工作）：

但是如果在#content元素中有很多其他元素，比如由DIV元素组成的表，我们就会开始面临一些问题。父元素的高度将不会调整到其子元素的高度，除非添加一些新规则，否则填充和边距将无法正常工作（如果我们检查元素，我们将看到宽度和高度的行为不符合预期）

我使用了

float:left

，但之后头痛开始了！当我添加

float:left

时，只有那些元素可以正常工作，但父元素不能。如果我将

float:left

添加到已经设置了

margin:0 auto

的元素中，它将不再与页面中心对齐

我见过一些解决方案使用

text align:center

到父对象和

display:inline块；浮动：无到我们要与中心对齐的元素。但是它也有很多问题（例如，我们不能设置
float
规则）

如何处理这个问题，伙计们？
在元素上使用
float
后，需要使用
clear
，以便“清除浮动”，并使高度传播到其父元素。您可以使用
clear:left
（或right）只清除
float:left
元素，但通常只使用
clear:all

在下面的示例中，有两个版本的clearfixes，一个在容器上使用伪元素，另一个只是另一个元素


HTML

<div id="content">
    <nav>
        <ul>
            <li>Home</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </nav>
    <div class="float-me">Test1</div>
    <div class="float-me">Test2</div>
    <div class="clear"></div>
</div>

你能给我一些链接解释一下
如何清晰：这两个
都能帮我解决这个问题吗？当我不希望两个元素并排时，我通常使用
clear:all
。TY我可以简单地使用
而不是伪元素，对吗？伪元素的问题是旧浏览器不支持这一点。
<div id="content">
    <nav>
        <ul>
            <li>Home</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </nav>
    <div class="float-me">Test1</div>
    <div class="float-me">Test2</div>
    <div class="clear"></div>
</div>

#content {
    width: 500px;
    margin: 0 auto;
}

li {
    float:left;
}

/* our pseudo-element clearfix */
ul:after {
    display: block;
    content: "";
    clear: both;
}

.float-me {
    float:left;
}

.clear {
    clear:both;
}