부유물을 치우는 방법과 이유

여러분은 "정리 부유물"에 대해 들어본 적이 있지만, 정말로 그것을 이해하나요? 이 모든 문제는 부동 객체가 있는 객체의 높이에 제대로 추가되지 않는다는 것입니다. 아래에서 볼 수 있듯이 클래스가 "floated_box"인 이러한 div는 div "main_container" 안에 있지만 페이지에서는 컨테이너 div 외부에 있습니다.

#main_container {
   width: 400px;
   margin: 20px auto;
   border: 2px solid #cccccc;
   padding: 5px;
}

.floated_box {
   float: left;
   width: 100px;
   height: 100px;
   border: 1px solid #990000;
   margin: 10px;
}

<div id="main_container">
   <p>Some content.</p>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
</div>

우리가 해야 할 일은 유동성을 제거하는 것이고, 이 모든 문제는 사라집니다. 마지막으로 띄운 개체 뒤에 이 빈 디브를 놓습니다.

<div style="clear: both;"></div>

그리고 여러분은 이것을 이해합니다.

이 수정은 CSS와 반대되는 일부 쓸모 없는 표시를 추가하지만, 쉽게 크로스브라우저 수정으로 실망하지는 않습니다.