CSS 배경색이 높이가 지정되거나 부유되지 않으면 작동하지 않습니다.

Question

누구나이 JFiddle의 CSS 3 행에서 이유를 설명 할 수 있습니까 demo #form_container의 div ID가 14 행에서 float : left가 지정된 경우 배경이 표시되도록 높이가 필요한 이유는 무엇입니까? 나는 수레 브라우저의 흐름에서 개체를 제거하지 않은 생각

...

<div id="form_container"> 
<form id="contact_form" action="#" method="get" accept-charset="utf-8"> 
    <p> 
     <label for="byour_name">Name:</label> 
     <input type="text" name="byour_name" value="" id="byour_name"> 
    </p> 
    <p> 
     <label for="byour_email_address">Email:</label> 
     <input type="text" name="byour_email_address" value="" id="byour_email_address"> 
    </p> 
    <p> 
     <label for="subject">Subject:</label> 
     <input type="text" name="formsubject" value="" id="form_subject"> 
    </p> 
    <p>Message: 
     <br/> 
     <textarea id="form_messagebox" name="Message" rows="20" cols="25"></textarea> 
    </p> 
    <p> 
     <input id="submitBtn" type="submit" value="Send it!"> 
    </p> 
</form> 

CSS

#form_container { 
    width: 300px; 
    /* height: 300px; Background works with this uncommented if the float is enabled*/ 
    border: 2px red solid; 
    padding: 0 10px 0 10px; 
    background-color: red !important; 
} 
#form_container form { 
    color: black; 
} 
#form_container input, p { 
    margin: 0; 
    padding 0; 
    float:left; /* This breaks the background */ 
    display:inline; 
} 
#form_container label { 
    width: 200px; 
    position:relative; 
} 
#submitBtn { 

} 
#contact input, textarea { 
    box-sizing: border-box; 
    color: rgb(0, 0, 0); 
    border-radius: 5px; 
    box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px; 
    background-color: rgb(221, 220, 219); 
    font: normal normal normal 16px/1.3em'open sans', sans-serif; 
    border: 0px solid rgb(192, 185, 181); 
} 
#form_messagebox { 
    height: 150px; 
    width: 200px; 
} 

Answer 1

여기 가야의 바이올린이

http://jsfiddle.net/jkkheni/eJS6b/3/

분명

.clear{ clear:both; height:0px; width:0px; display:table; content:"";} 

의 CSS 클래스를 추가하고 ID로 사업부를 닫기 전에 HTML

<div class="clear"></div> 

에 사업부를 추가 참조입니다 form_container

당신은 항상 모든 float을 지우기 위해 float를 사용합니다. 또는 form_container의 ID로 overflow:hidden을 입력 할 수도 있습니다.

Answer 2

이 지정되지 않은 경우 float이 요소의 높이를 제거 .

시도 :

#form_container{ 
    overflow:hidden; 
} 

DEMO here.

또는 마무리 양식 후

명확 수레 :

<div class="clr"></div> 
.clr{clear:both;} 

DEMO here.