朋友们
我决定问这个问题是因为我在互联网上看到了很多答案，但是似乎没有人给出确切的答案。
在HTML文档中，我们内部有许多元素。最终，我们要向这些元素添加填充和边距。
那么，如果我们想使所有内容与页面中心水平对齐怎么办？如果内容的宽度为1000px，并且屏幕分辨率将因设备而异，则最常见的解决方案是（在基于Netscape的浏览器上可用）：
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
但是，如果我们在#content元素中还有许多其他元素，例如由DIV元素制成的表格，我们将面临一些问题。除非我们添加一些新规则，否则父级的高度将无法适应其子级的高度，并且填充和边距将无法正常工作（如果我们检查元素，则会发现宽度和高度的行为不符合预期）。
我用了，float: left但是头痛开始了！当我添加float: left这些元素时，只有那些元素可以正常工作，而父母则不能。如果我添加float: left到已margin: 0 auto设置的元素，它将不再与页面中心对齐...
我已经看到了一些text-align: center用于父级和display: inline-block; float: none;我们要与中心对齐的元素的解决方案。但这也有很多问题（例如，我们无法设置float规则）
您如何处理这个问题的家伙？
在元素上使用clear后，需要使用，float以“清除浮标”并使高度传播到其父对象。您可以使用clear:left（或正确）清除float:left元素，但通常只使用即可clear:both。
在下面的示例中，有两种版本的clearfix，一种在容器上使用伪元素，另一种仅是另一个元素。
的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>
的CSS
#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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句