html - DIV流与边界问题

Question

代码有什么问题。边框有问题。

<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
    <div id="USER" style="margin: 5px">
        <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
        <input id="txt_ID" type="text" style="width: 45%; float: left"/>
    </div>
    <div id="PASS" style="margin: 5px">
        <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
        <input id="txt_Password" type="text" style="width: 45%; float: left"/>
    </div>
</div>

Answer 1

您在内部 div 中使用 float ，因此父级没有高度。只需将 float: left; 设置为 contents div，您就会看到您的问题。

<div id="contents" style="width: 50%; height: auto; margin: 0 auto; float: left; left: 50%; border: 2px solid #73AD21;">
  <div id="USER" style="margin: 5px">
    <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
    <input id="txt_ID" type="text" style="width: 45%; float: left"/>
  </div>
  <div id="PASS" style="margin: 5px">
    <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
    <input id="txt_Password" type="text" style="width: 45%; float: left"/>
  </div>
</div>

您可能不应该使用内联 css，而应该使用外部 css 文件并使用 clearfix 来清除 contents div 上的 float 。