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無法調整它們的大小。如果遇到類似問題，請嘗試刪除大部分/所有這些類型的樣式，並從頭開始工作 - 這可以幫助很多！

希望這會有所幫助！如果您有任何問題，請告訴我。