Question

我想保留父div中的所有内容，但是第二个div会出现在外面，好像开始一个新行并且我无法解决这个问题。有人可以告诉我为什么＆gt;

感谢。

<!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>

Answer 1

我会将以下样式添加到包含浮动div的div中：

overflow: hidden;
zoom: 1;

溢出设置确保它完全包装其浮动子div并且缩放设置适用于IE浏览器，以使其进入“hasLayout”模式。使用clear:both的特殊空div是一种相当丑陋，过时的方法，可确保您拥有正确的布局。

这里有一篇关于这个主题的优秀文章： http://www.quirksmode.org/css/clearing.html 虽然文章使用width: 100%来达到同样的目的。

Answer 2

由于您使用了float，因此就父容器而言，该容器的高度为零。要更改它，请在父div结束之前添加一个额外的虚拟标记：

<div style="clear: both;"> </div>

为什么我的第二个div超出了第一个div？

2 个答案: