HTML&CSS Float으로 Layout 짜기

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) 수 있습니다.