clear 속성을 사용하고, 다음 요소를 하단에 위치시키고 싶을 때, clear 속성을 사용해야 합니다.
clear 속성은 플로트 된 요소의 옆에 있는 요소에 적용될 것을 지정합니다.
clear 속성은 다음의 값들 중 하나를 가질 수 있습니다.
none - 요소는 플로트된 요소들의 좌측 또는 우측 아래에 위치하지 않습니다. 이것이 기본 값입니다. left - 요소는 좌측으로 플로트된 요소들 아래로 위치하게 됩니다.right - 요쇼는 우측으로 플로트된 요소들 아래로 위치하게 됩니다.both - 요소는 좌측과 우측 양쪽으로 플로트된 요소들의 아래에 위치하게 됩니다.inherit - 요소는 부모 요소의 clear 값을 상속 받습니다.
floats 속성을 제거할 때, clear 속성을 float 속성에 일치시켜야 합니다:
요소가 좌측으로 플르토 될 경우, 좌측으로 지워야 합니다.
플로트 된 요소가 계속 플로트 되지만, 플로트 속성이 제거된 요소는 웹 페이지에서 그 아래에 표시됩니다.
하기의 예제는 좌측으로의 플로트 속성을 제거합니다.
<div2> 요소가 좌측으로 플로트 된 <div1> 요소 아래에 위치된다는 것을 의미합니다.
<style> .div1 { float: left; padding: 10px; border: 3px solid #73ad21; } .div2 { padding: 10px; border: 3px solid red; } .div3 { border: 3px solid #72a; padding: 10px; float: left; } .div4 { border: 3px solid green; padding: 10px; clear: left; } </style> </head> <body> <h2>Without clear</h2> <div class="div1">div1</div> <div class="div2"> div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1. </div> <br /><br /> <h2>With clear</h2> <div class="div3">div3</div> <div class="div4"> div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both". </div> </body>
플로트 된 요소가 플로트 된 요소를 포함하는 요소보다 더 큰 경우, 컨테이너 외부로 넘치게 됩니다(overflow).
이 문제를 해결하기 위해, clearfix hack을 추가할 수 있습니다.
<style> div { border: 3px solid #4caf50; padding: 5px; } .img1 { float: right; } .img2 { float: right; } .clearfix { overflow: auto; } </style> </head> <body> <h2>Without Clearfix</h2> <p> This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container: </p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170" /> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit... </div> <h2>With Clearfix</h2> <p> We can fix this by adding a clearfix class with overflow: auto; to the containing element: </p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170" /> Lorem ipsum dolor, sit amet consectetur adipisicing elit... </div> </body>
overflow: auto clearfix는 마진과 패딩을 제어할 수 있는 한 잘 작동합니다.(그렇지 않을 경우, 스크롤 막대가 표시될 수 있슴). 그러나 새롭고 현대적인 clearfix hack은 사용하기에 더 안전하며, 대부분의 웹페이지에서 아래의 코드가 사용됩니다.
<style> div { border: 3px solid #4caf50; padding: 5px; } .img1 { float: right; } .img2 { float: right; } .clearfix::after { content: ''; clear: both; display: table; } </style> </head> <body> <h2>Without Clearfix</h2> <p> This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container: </p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170" /> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit... </div> <h2>With New Modern Clearfix</h2> <p>Add the clearfix hack to the containing element, to fix this problem:</p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt maxime rerum iste error. </div> </body>