티스토리 뷰
반응형
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;
}
출력결과
반응형
'HTML CSS JS' 카테고리의 다른 글
CSS) position: relative; (0) | 2021.08.30 |
---|---|
CSS) position, top, bottom, left, right (0) | 2021.08.30 |
CSS) display 수정 (0) | 2021.08.30 |
CSS) font-family float clear .clearfix::after { content: ""; clear: both; display: block;} (0) | 2021.08.24 |
CSS) letter-spacing, word-spacing (0) | 2021.08.24 |
댓글
공지사항