HTML&CSS Float으로 Layout 짜기
October 20, 2020
Float으로 layout 짜기
Float property는 한 엘리먼트가 보통의 흐름에서 빠지면서 텍스트, 인라인 요소가 자신의 좌측이나 우측에 배치되어야 함을 나타냅니다.
<div class="float-1">one</div>
<div class="float-2">two</div>
<div class="float-3">three</div>
<span>Lorem ipsum dolor sit amet...</span>.float-1 {
background-color: pink;
float: left;
}
.float-2 {
background-color: greenyellow;
float: left;
}
.float-3 {
background-color: lightblue;
float: right;
}
보통은 이런식으로 텍스트 사이에 이미지를 끼우는 데에 사용한다고 합니다!
clear
<div class="float-1"></div>
<div class="float-2"></div>
<div class="float-3"></div>
<div>this is sample text</div>
<div class="txt-box">Lorem ipsum, dolor sit...</div>.float-1 {
background-color: pink;
float: left;
width: 40px;
height: 40px;
}
.float-2 {
background-color: greenyellow;
float: left;
width: 40px;
height: 40px;
}
.float-3 {
background-color: lightblue;
float: left;
width: 40px;
height: 40px;
}
만약 float으로 설정해둔 박스 옆의 텍스트가 박스 범위를 넘어서지 않을 경우,
다음 텍스트(위 사진에선 lorem 어쩌구..)에도 float이 영향을 미치는 것을 볼 수 있습니다.
불-편하죠… 이런 현상은 clear property를 이용해서 해결할 수 있습니다.
.float-1 {
background-color: pink;
float: left;
width: 40px;
height: 40px;
}
.float-2 {
background-color: greenyellow;
float: left;
width: 40px;
height: 40px;
}
.float-3 {
background-color: lightblue;
float: left;
width: 40px;
height: 40px;
}
.txt-box {
clear: left;
}
txt-box class를 가진 요소에 clear left를 주어 float을 지울(clear) 수 있습니다.
