내부에 부유물을 사용하면서 div 높이를 높이는 방법 내부에 플로트가있을 때 div의

내부에 플로트가있을 때 div의 높이를 어떻게 늘릴 수 있습니까? 너비 값을 정의하고 오버플로를 숨겨진 작업으로 설정하는 것을 알고 있습니다. 문제는 오버플로가 표시된 div가 필요하다는 것입니다. 어떤 아이디어?

답변

overflow:auto;포함하는 div에서 내부의 모든 항목 (부동 항목 포함)이 표시되고 외부 div가 해당 항목을 완전히 둘러 쌉니다. 이 예를 참조하십시오.

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }

.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}
<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>
스 니펫 확장

답변

수레를 지우는 방법은 여러 가지가 있습니다. http://work.arounds.org/issue/3/clearing-floats/에서 일부를 확인할 수 있습니다
.

예, clear:both당신을 위해 일할 수 있습니다

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

답변

대부분의 경우 overflow: auto;충분하지만 완성 및 크로스 브라우저 지원을 위해 모든 브라우저에서 작업을 수행 할 Clearfix 를 살펴보십시오 .

다음 마크 업을 살펴 ​​보겠습니다.

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

다음 스타일과 함께 ..

.content { float:left; }

.clearfix { ..from link.. }

clearfix가 없으면 부모 div는 떠 다니는 자식이기 때문에 높이가 없습니다. clearfix는 부모가 플로팅 자식을 고려하게합니다.

답변

나는 그것을하는 좋은 방법 display: table은 div에 설정하는 것이라고 생각했습니다 .

답변