clear: both 웹표준 사용하기

• 웹디자인 기능사 시험에 clear:both;를 사용하면 감점요소이다.
• 따라서 아래와 같이 css 작성해서 필요시 html에 있는 class에 적용하면 된다.

1. 요소들에 float을 걸면 아래쪽에 오는 요소들이 계속 float이 걸린다.
2. 이를 방지하기 위해 clearfix를 사용한다.
3. clear:both는 float이 걸린 요소 그 다음에 오는 요소에게 쓰지만,
4. clearfix는 float을 걸어논 요소를 감싸고 있는 부모 요소에 쓴다.

 

.clearfix::before, .clearfix::after {
	display: block;
	clear: both;
	content: '';
}

• before과 after 앞에 :: 콜론 2개 넣기

 

* 적용예시

// 클래스 명이 없을 시
<div class="clearfix">
	<h1>클리어</h1>
	<p>내용</p>
</div>

===============================

// 이미 클래스 명이 있을 시
<div class="this_name clearfix">
	<h1>클리어</h1>
	<p>내용</p>
</div>