Front/CSS
CSS - header 메뉴 정렬 (float / clear)
by Hyeon_
2021. 12. 9.
float
clear
- float 속성 해제
- clear:left; -> float:left; 해제
- clear:right; -> float:right; 해제
- clear:both: -> float:left;와 float:right; 모두 해제
float 속성 문제
- float을 적용해서 정렬된 요소 다음에 오는 요소가 float이 적용된 요소 뒤로 붙는 현상
- 정상
- float:right; 를 적용하고 해제했을 때 / float:left;를 적용하고 해제했을 때
문제 해결
- 방법(1) : float이 적용된 요소 다음에 오는 요소에 clear 적용
- 방법(2) : float이 적용된 요소의 부모 요소에 가상 요소를 만들고 float 적용
- 부모요소::after { ... clear:both; }
가상 클래스
가상 요소
clear 예제
clear.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS : clear 속성</title>
<style type="text/css">
/* clear 사용법1 - 다음 요소에 clear 적용 */
#menu {list-style:none; padding:0;}
#menu li {float:right;}
#p1 {clear:right;}
/* clear 사용법2 - float 적용된 요소의 부모 요소에 가상요소(::after) 만들고 clear 적용 */
#menu2 {list-style:none; padding:0;}
#menu2 li {float:right;}
.clearfix::after {
display:block;
content:'';
clear:both;
}
/* clear 사용법3 - 부모요소(<ul>)에 height 속성 설정하면 clear 적용 */
#menu3 {
list-style:none;
padding:0;
height:20px;
background:grey;
color: white;
}
#menu3 li {float:right;}
</style>
</head>
<body>
<div>
<ul id="menu">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
<p id="p1">메뉴 다음에 오는 요소</p>
</div>
<hr>
<div>
<ul id="menu2" class="clearfix">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
<p id="p2">메뉴 다음에 오는 요소</p>
</div>
<hr>
<div>
<ul id="menu3">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
<p id="p3">메뉴 다음에 오는 요소</p>
</div>
</body>
</html>
