div를 올바르게 (경계 내부에) 떠 다니는 요소가 포함되도록하려면 어떻게해야합니까?

Question

왜

<div style="border: 1px solid black;"> 
    <button style="float: right; padding: 10px;">this is button</button> 
</div> 

이 어떻게 사업부가 제대로이 요소를 떴다 (테두리 안에)를 포함해야합니까 ( float 속성이 left 또는 right 지정)가 제대로 떴다 포함 요소를 div에하지 않는 이유는 무엇입니까?

Answer 1

div에 overflow: auto을 사용해야합니다. 콘텐츠에 따라 div가 확장됩니다. http://css-tricks.com/the-css-overflow-property/

Answer 2

당신은 다른 컨테이너가 제로 높이로 축소됩니다 수레을 취소해야합니다 여기

http://jsfiddle.net/jMshh/

<div style="border: 1px solid black; overflow: auto"> 
    <button style="float: right; padding: 10px;">this is button</button> 
</div> 

는 오버 플로우가 작동하는 방법을 자세히 설명하는 튜토리얼입니다. 이를 수행 할 수있는 많은 방법이 있습니다. 부모 div에 대한 <div style="clear: both;"></div>

<div style="border: 1px solid black;"> 
    <button style="float: right; padding: 10px;">this is button</button> 
    <div style="clear: both;"></div> 
</div> 

Answer 3

사용 : 다음은 한 예입니다.

Answer 4

사용 overflow: hidden - :

<div style="border: 1px solid black;"> 
    <button style="float: right; padding: 10px;">this is button</button> 

    <div class="clearfix"></div> 
</div> 

---

.clearfix { 
    clear: both; 
} 

Answer 5

사용 맑은 수정

.clear:after, .clear:before { 
    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden; 
} 
.clear:after { 
    clear: both; 
} 

http://jsfiddle.net/jMshh/