# clear
- float 속성을 해제합니다
clear::after { /* ::after -> 요소 내용 끝에 새로운 컨텐츠를 추가 */
content: ""; /* 빈 컨텐츠 : 가상 요소(::after)를 실행시키시 위해서 필요 */
display: block; /* 한줄 차지 */
clear: both; /* float 속성 해제 */
div {
font-size: 20px;
font-weight: bold;
}
.box-area {
border: 1px solid gray;
width: 600px;
height: 600px;
}
.box {
padding: 10px;
}
.red {
width: 580px;
height: 100px;
background-color: red;
}
.green {
width: 200px;
height: 300px;
background-color: green;
float: left;
}
.blue {
width: 200px;
height: 300px;
background-color: blue;
float: right;
}
.orange {
width: 580px;
height: 100px;
backgrou <body>
<h1>float clear</h1>
<div class="box-area">
<div class="box red">red</div>
<div class="box green">green</div>
<div class="box blue">blue</div>
<div class="clear"></div>
<div class="box orange">orange</div>
</div>
</body>
코딩 일기장