浮动元素不在div中

Question

我有一个简单的CSS布局。在我的div内容中，我想使用float将其拆分为两个部分。但是，尽管我的浮动元素放在我的div内容中，但它不会留在里面。

.content {
  border: 5px solid #0099CC;
  width: 90%;
  min-width: 1000px;
  margin: auto;
}

.left {
  float: left;
  width: 300px;
}

.right {
  float: right;
  width: 700px;
}

<div class="content">
  <p>This is my content page</p>
  <div class="left">
    <form>
      <fieldset>
        <legend>User Login</legend>
      </fieldset>
    </form>
  </div>
  <div class="right">
    <form>
      <fieldset>
        <legend>Main Area</legend>
      </fieldset>
    </form>
  </div>
</div>

当我删除浮动时，我的字段集将在我的div内容中。所以我怀疑它可能是我的浮动CSS导致问题。

Answer 1

添加

<div style="clear:both;"></div> after completing 'right' div

＆＃13;

＆＃13;

.content {
    border: 5px solid #0099CC;
    width: 90%;
    min-width: 1000px;
    margin: auto;
}

.left{
    float: left;
    width: 300px;
}

.right{
    float: right;
    width: 700px;
}

＆＃13;

<div class="content">
    <p>This is my content page</p>
    <div class="left">
        <form>
            <fieldset>
                <legend>User Login</legend>
            </fieldset>
        </form>
    </div>
    <div class="right">
        <form>
            <fieldset>
                <legend>Main Area</legend>
            </fieldset>
        </form>
    </div>
    <div style="clear:both;">
    
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您已使用.right

，请移除float: left课程

＆＃13;

＆＃13;

.content {
    border: 5px solid #0099CC;
    width: 90%;
    min-width: 1000px;
    margin: auto;
}

.left{
    float: left;
    width: 300px;
}

＆＃13;

<div class="content">
    <p>This is my content page</p>
    <div class="left">
        <form>
            <fieldset>
                <legend>User Login</legend>
            </fieldset>
        </form>
    </div>
    <div>
        <form>
            <fieldset>
                <legend>Main Area</legend>
            </fieldset>
        </form>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在overflow: hidden;

中添加.content

.content {
border: 5px solid #0099CC;
width: 90%;
min-width: 1000px;
margin: auto;
overflow: hidden;

}