style = "clear : both"의 사용은 무엇입니까?

98

나는 div스타일이있는 것을 봤다 clear:both! clearin 의 용도는 무엇입니까 style?

<div style="clear:both">

html css

— Thomasbabuj
소스

249

clear:both 요소가 문서에서 앞에있는 플로팅 요소 아래로 드롭되도록합니다.

당신은 또한 사용할 수 있습니다 clear:left또는 clear:right이 왼쪽 또는 오른쪽으로 떠 된 요소 만 아래에 드롭 할 수 있습니다.

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+

— RichieHindle
소스

2

또한 높이에 맞게 부모 div를 만듭니다.

— Oleg

@Jason, 언급하신 버그는 Windows XP의 Internet Explorer 6에만 적용됩니다. 요즘 대부분 지원할 필요가없는 것은 좋은 일입니다.

— Yevgeniy Afanasyev

5

@YevgeniyAfanasyev, 네, 사실입니다. 내 의견은 여전히 적용 가능한 2009 년의 것입니다.

— Jason

20

RichieHindle의 답변에 추가하려면 CSS 플로팅 및 지우기 작동 방식을 안내하는 Floatutorial을 확인하십시오 .

— 폴 딕슨
소스

1

2016 년 2 월 15 일에 Floatutorial을 위해 서버에 연결할 수 없습니다 (포트 80에서 연결이 거부 됨).

— dlu

3

너비없이 float를 사용하면 해당 행에 약간의 공간이 남습니다. 이 공간을 차단하려면 clear:both;다음 요소에서 사용할 수 있습니다 .

— 임다 드
소스