CSS) clear

1) clear

float 속성이 적용되지 않도록 지정(해제)

속성 값

값	의미	기본값
none	요소 띄움 허용	none
left	왼쪽 띄움 해제
right	오른쪽 띄움 해제
both	양쪽(왼쪽, 오른쪽) 모드 띄움 해제

 

사용법

clear: both;

※ 보통은 clear: both;를 사용한다.

 

1. clear: both; 적용전

html

<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
<div class="box2"> 1 </div>
<div class="box2"> 2 </div>
<div class="box2"> 3 </div>

css

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: tomato;
  float: left;
}
.box2 {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: green;
/*   clear: both; */
}

출력결과

 

2. clear: both; 적용후

html

<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
<div class="box2"> 1 </div>
<div class="box2"> 2 </div>
<div class="box2"> 3 </div>

css

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: tomato;
  float: left;
}
.box2 {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: green;
  clear: both;
}

출력결과