CSS浮动的div出现在父div下面

Question

我试图设计一个基于this codepen的联系表，并且浮动的表单出现在它的父div下面而不是它内部。我曾尝试添加一个没有运气的clearfix。我也对这种溢出感到厌烦，也没有运气。 CSS并不是我的强项，我在rails中这样做会让事情变得复杂，所以我很确定这只是我错过的一些愚蠢的东西。生成的HTML和我的CSS低于和here is a fiddle，在那里你可以看到它在做什么。我希望整个表单处于白色部分，而不是下面。感谢您提供任何帮助！

HTML

<div id="contact"> 
    <div id="contact-header">Contact Me</div> 
    <div id="form-main"> 
     <div id="form-div"> 
      <form accept-charset="UTF-8" action="/contacts" class="new_contact" id="new_contact" method="post"> 
       <div style="display:none"> 
        <input name="utf8" type="hidden" value="&#x2713;" /> 
        <input name="authenticity_token" type="hidden" value="EoDahqxZMOLK9RYj8VfIO3lNh4EuGIcUZFv2+aWPj4Q=" /> 
       </div> 
       <p class="name"> 
        <input class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" id="contact_name" name="contact[name]" placeholder="Name" type="text" /> 
       </p> 
       <p class="email"> 
        <input class="validate[required,custom[email]] feedback-input" id="contact_email" name="contact[email]" placeholder="Email" type="text" /> 
       </p> 
       <p class="text"> 
        <textarea class="validate[required,length[6,300]] feedback-input" id="contact_message" name="contact[message]" placeholder="Message"></textarea> 
       </p> 
       <div class="submit"> 
        <input id="button-blue" name="commit" type="submit" value="SEND" /> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 
<!--contact--> 

CSS

#contact { 
    background-color: white; 
} 

#contact-header{ 
    text-align:center; 
    font-size: 40px; 
    color: #FAF8F2; 
    padding-top: 30px; 
} 

#form-main{ 
    width:100%; 
    float:left; 
    padding-top:0px; 
} 

#form-div { 
    background-color:#F0B49E; 
    padding: 35px 35px 50px 35px; 
    width: 450px; 
    float: left; 
    left: 50%; 
    position: absolute; 
    margin-top:30px; 
    margin-left: -260px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
} 

.feedback-input { 
    color:#3c3c3c; 
    font-family: "PT Sans", Helvetica, Arial, sans-serif; 
    font-weight:500; 
    font-size: 18px; 
    border-radius: 0; 
    line-height: 22px; 
    background-color: #FAF8F2; 
    padding: 13px 13px 13px 13px; 
    margin-bottom: 10px; 
    width:100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
    border: 3px solid rgba(0,0,0,0); 
} 

.feedback-input:focus{ 
    background: #fff; 
    box-shadow: 0; 
    border: 3px solid #A79C8E; 
    color: #A79C8E; 
    outline: none; 
    padding: 13px 13px 13px 54px; 
} 

.focused{ 
    color:#30aed6; 
    border:#30aed6 solid 3px; 
} 

textarea { 
    width: 100%; 
    height: 150px; 
    line-height: 150%; 
    resize:vertical; 
} 

input:hover, textarea:hover, 
input:focus, textarea:focus { 
    background-color:white; 
} 

#button-blue{ 
    font-family: 'PT Sans', Arial, Helvetica, sans-serif; 
    float:left; 
    width: 100%; 
    border: #A79C8E solid 4px; 
    cursor:pointer; 
    background-color: #A79C8E; 
    color:white; 
    font-size:24px; 
    padding-top:22px; 
    padding-bottom:22px; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
    margin-top:-4px; 
    font-weight:700; 
} 

#button-blue:hover{ 
    background-color: #F0B49E; 

} 

.submit:hover { 
    color: #3498db; 
} 

.ease { 
    width: 0px; 
    height: 74px; 
    background-color: #FAF8F2; 
    -webkit-transition: .3s ease; 
    -moz-transition: .3s ease; 
    -o-transition: .3s ease; 
    -ms-transition: .3s ease; 
    transition: .3s ease; 
} 

.submit:hover .ease{ 
    width:100%; 
    background-color:#A79C8E; 
} 

Answer 1

啊......不幸的是，浮动仅部分有助于您遇到什么。在#form-div上使用position: absolute实际上会带来更大的问题（在我看来）。

以下是我将要使用的CSS属性删除。浮动和位置属性用于比较宽松，但我不认为有需要这么多的让你在找什么：

#form-main { 
    float:left; 
} 
#form-div { 
    float: left; 
    left: 50%; 
    position: absolute; 
    margin-top:30px; 
    margin-left: -260px; 
} 
#button-blue { 
    float:left; 
} 

而且只有一个，我会添加 - 这可以让你轻松地居中#form-div，而无需施加负利润或绝对定位：

#form-div { 
    margin:30px auto 0; 
} 

下面是与注释掉那些风格JSFiddle，而最后一个加入。

由于浮点数和绝对定位将元素置于普通文档流之外，因此尝试实现所需的布局而不对许多值进行硬编码会非常棘手。在这种情况下，该CSS导致很多元素的高度被忽略，导致#contact无法调整它们的大小。如果遇到类似问题，请尝试删除大部分/所有这些类型的样式，并从头开始工作 - 这可以帮助很多！

希望这会有所帮助！如果您有任何问题，请告诉我。