CSS에서 'clear:both'를 언제 사용해야 합니까?

CSS에서 'clear:both' 사용 이해

'clear:both' 스타일 속성을 접하면 의문이 생길 수 있습니다. CSS(Cascading Style Sheet) 내에서의 목적에 대해 설명합니다.

'clear' 속성 설명

'clear' 속성은 요소가 부동 요소 아래에서 중단되어야 하는지 여부를 지정합니다. 문서에서 그 앞에 나오는 요소. 기본적으로 블록 수준 요소는 부동 요소 아래에서 자동으로 중단되어 예상치 못한 레이아웃 불일치가 발생할 수 있습니다.

'clear:both' 사용

'clear: 양쪽' 값은 요소가 왼쪽 또는 오른쪽 정렬 여부에 관계없이 이전 부동 요소 아래로 강제로 내려갑니다. 이렇게 하면 요소가 위에 있는 부동 요소와 겹치거나 방해하지 않습니다.

예

다음 HTML 코드를 고려하세요.

<div>
<p>이 예에서는 두 번째 div가 왼쪽으로 떠 있기 때문에 첫 번째 div의 오른쪽에 나타납니다. 이러한 중복을 방지하려면 두 번째 div에 'clear:both' 스타일을 추가할 수 있습니다.</p>
<pre class="brush:php;toolbar:false"><div>
<p>이렇게 하면 두 번째 div가 첫 번째 div 아래로 나뉘어 올바르게 표시됩니다.</p>
<p><strong>추가 사용 사례</strong></p>
<p>특정 시나리오에서는 지워야 하는 특정 플로팅 요소를 지정하기 위해 대신 'clear:left' 또는 'clear:right'를 사용할 수 있습니다. . 예를 들어 'clear:left'를 사용하여 왼쪽에 플로팅된 요소와 겹치는 것을 방지하거나 'clear:right'를 사용하여 오른쪽에 플로팅된 요소에 사용할 수 있습니다.</p>
</div>