我想将所有内容都保留在父 div 中，但第二个 div 在外面，就好像开始新的一行一样，我无法弄清楚这一点。谁能告诉我为什么>
谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div style="border:1px solid #000;">
<h3>Title</h3>
<p>Everything here expands with the parent div but the div just below this paragraph tag will not expand.</p><br />
<div>
<span style="float:left; width:49%; border:1px solid #000;">
Book<br />
<select id="book" name="book">
<option value="">Select..</option>
</select>
</span>
<span style="float:right; width:49%; border:1px solid #000;">
Chapter<br />
<input type="text" id="chapter" name="chapter" />
</span>
</div>
</div>
</body>
</html>
这些是新的变化并正确呈现。请查看我是否遗漏了其他任何内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div style="border:1px solid #000;">
<h3>Title</h3>
<p>Everything here expands to the parent div but the div just below this paragraph tag will not expand.</p><br />
<div>
<span style="float:left; width:49%; border:1px solid #000;">
Book<br />
<select id="book" name="book">
<option value="">Select..</option>
</select>
</span>
<span style="float:right; width:49%; border:1px solid #000;">
Chapter<br />
<input type="text" id="chapter" name="chapter" />
</span>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
最佳答案
我会将以下样式添加到包含 float div 的 div:
overflow: hidden;
zoom: 1;
溢出设置确保它完全包裹其 float 子 div，缩放设置用于 IE 浏览器，将它们踢入“hasLayout”模式。将特殊的空 div 与 clear:both 结合使用是一种相当丑陋、过时的确保布局正确的方法。
这里有一篇关于这个主题的优秀文章:
http://www.quirksmode.org/css/clearing.html
尽管文章使用 width: 100% 来达到同样的目的。
关于css - 为什么我的第二个 div 超出了第一个 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1658309/