CSS - float가 사용되지 않을 때 컨테이너의 상자가 왜 있습니까?

왜 내가 상자를 떠 다니지 않고 상자에 3 개의 상자가있을 때 외부 상자가 상자를 감싸고 있지만 상자를 추가하면 외부 상자가 접히는 이유는 무엇입니까?CSS - float가 사용되지 않을 때 컨테이너의 상자가 왜 있습니까?

<html> 
<head></head> 
<body> 
<style> 
#OuterWrapper { 
    height: 100%; 
    width: 200px; 
    border: 1px BLACK dotted; 
    text-align: left; 
} 

.Box { 
    float: left; // remove this float and the outer wrapper wraps the three boxes 
    height: 50px; 
    width: 50px; 
    background: BLUE; 
    border: 1px WHITE SOLID; 
} 
</style> 
<div id="OuterWrapper"> 
    <div class="Box"></div> 
    <div class="Box"></div> 
    <div class="Box"></div> 
</div> 
</body>

출처

2011-09-10 Evik James

부동 요소가 상위 요소 크기에 영향을주지 않기 때문입니다. overflow 스타일을 사용하여 요소에 하위 요소가 포함되도록 할 수 있습니다.

또한 페이지가 누락 모드로 렌더링되지 않도록 doctype 태그가 있어야합니다. style 요소는 head 요소에 있어야합니다. </html> 태그가 없습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
#OuterWrapper { 
    width: 200px; 
    border: 1px BLACK dotted; 
    text-align: left; 
    overflow: hidden; 
} 

.Box { 
    float: left; 
    height: 50px; 
    width: 50px; 
    background: BLUE; 
    border: 1px WHITE SOLID; 
} 
</style> 
</head> 
<body> 
<div id="OuterWrapper"> 
    <div class="Box"></div> 
    <div class="Box"></div> 
    <div class="Box"></div> 
</div> 
</body> 
</html>

출처

2011-09-10 19:49:13 Guffa

답변, 설명 및 조언을 주셔서 감사합니다. 그러나 CSS를 자바 스크립트로 식별했습니다. 그럴 의도는 아니 었지, 그렇지? –

@Evik James : 당신 말이 맞아요. 내 손가락이 그랬어 ... :) – Guffa

컨테이너에 'overflow : hidden'을 사용하여 플로트를 포함하는 경우에도 명시적인 높이를 설정하지 않았는지 확인하십시오. – steveax

당신은 바닥 DIV 후 취소해야 clear: both는 외부 래퍼 사업부를 강제로 사용

<div style='clear: both'></div>

마지막 떴다 상자 아래에 진출 할 수 있습니다. 여기에 전체 코드 조각입니다 :

.ClearBoth { 
    clear: both; 
}

을 최종 상자 후 DIV에 클래스를 적용

<div id="OuterWrapper"> 
    <div class="Box"></div> 
    <div class="Box"></div> 
    <div class="Box"></div> 
    <div style='clear: both'></div> 
</div>

물론, 당신은 또한 당신의 CSS 파일에 도우미 클래스를 만들 수 있습니다.

출처

2011-09-10 19:44:40

나는 과거에는 명확하지 않은 문제를 가지고있었습니다. 나는 이것을 시도 할 것이다. 감사!!! –

overflow:hidden; 스타일을 래퍼 div에 추가해보세요.

출처

2011-09-10 19:48:20

그래, 그게 정상적인 현대 해결 방법이야, 내가 아는 한. 실제 원래의 질문에 관해서는, 나의 대답은 "그것이 그것이 어떻게 발견 되었는가, 심지어 처음 발견했을 때 모든 사람들을 혼란스럽게 만들었다 고하더라도 그것이 명시되어 있기 때문이다." –

당신은 옳은 대답을 가지고 있었지만 설명이 나를 도왔을 것입니다. 감사!!!! –

CSS - float가 사용되지 않을 때 컨테이너의 상자가 왜 있습니까?

답변

관련 문제