0
제 이해는 div with clear : both; 그것의 양쪽에 위치하는 어떤 부동 형제 div도 가지지 않을 것입니다. 이 예제에서는 세 형제가 있고, 오버플로가있는 컨테이너 div의 부동 div가 왼쪽에 있습니다. 그들 모두가 나란히있을 충분한 공간이 있습니다.클리어가있는 요소 : 둘 다 부동 형제 요소가 있습니다.
아래의 jsfiddle 링크.
내가 적용 할 때 : 중간 div 모두 예상대로 다음 줄로 이동합니다. 그러나 오른쪽 영역의 div 또한 아래로 이동하고 해당 영역을 지우고 있지만 오른쪽에 남아 있습니다. 나는 각 부서가 새로운 라인에있을 것으로 기대한다.
더욱 더 난 그냥 명확 추가하는 경우 : 권리; 중간 div에 그것은 왼쪽에있는 div에 맞춰서 그대로 남아 있으며 오른쪽에있는 div도 옆에 있습니다. 올바른 div가 새 라인으로 옮겨 졌을지라도 나는 가질 수 있습니다.
이 문제는 서로 옆에있는 부동 형제 요소를 방지함으로써 달성하도록되어 분명 어떤 모순 것으로 보인다. 아무도 이것을 설명 할 수 있습니까? 여기
jsfiddle : https://jsfiddle.net/2tfgwmek/1/
HTML
<div class="container">
<div class="left">Left Div<br>float: left; </div>
<div class="middle">Middle Div<br>float: left; clear:both; </div>
<div class="right">Right Div<br> float:left </div>
</div>
CSS
.container {
width:300px;
overflow:auto;
border:solid 2px black;
}
.container > div {
width:90px; height:90px;
border:solid 1px red;
background:grey;
float:left;
color:white;
}
.middle {
clear:both;
}