我创建了一个快速的简单html文档，以练习浮动思考，并提供了一个简单的示例，可以立即使用。但是发生了一些奇怪的事情。
我只想以相等的宽度和大小将2个div彼此相邻地浮动。我使用了完全相同的标记和文字，以使其完全易于查看其工作方式。但是，以某种方式#content在标题上方填充，而＃content1没有标题，这使“框”方式不同步。但是，当我向＃content1添加仅0.1px的填充时，它们都排在一起并且具有完全相同的填充量？我什至似乎都没有掌握最基本的概念。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Float</title>
<style>
p {
padding: 0;
margin: 0;
}
#content {
float: left;
width: 50%;
background-color: grey;
}
#content1 {
padding-top: 0.1px;
margin-left: 50%;
width: 50%;
background-color: grey;
}
</style>
</head>
<body>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
<div id="content1">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
</body>
</html>
最佳答案
请记住，HTML元素具有一些默认样式，例如padding或margin，它们会影响元素的总宽度。您可以使用*使用CSS轻松更改这些内容，这会影响文档中的所有元素。
* {
padding: 0;
margin: 0;
border: none;
/*
etc., you can add here whatever you need to be a global style
and rewrite some things afterwards in the specific classes, ids, ...
*/
}
如果要浮动块，则需要考虑元素的总数，不仅要考虑
width属性，还要考虑其padding，margin和border。如果您浮动的元素的汇总（总）宽度大于其父元素的宽度，则不会浮动。因此，在您的运动中，它看起来像这样：
*, p {
padding: 0;
margin: 0;
}
#content {
float: left;
width: 50%;
background-color: grey;
}
#content1 {
/*
padding-top: 0.1px; - this is unnecessary
margin-left: 50%;
this margin makes the element 100% wide
(50% width + 50% margin-left), so it will not be floated to the
#content in your code as they would have the 150% of total width
and it's 50% more than the parent's width
(of course, parent's width is always 100%)
*/
width: 50%;
background-color: grey;
float: left;
}