CSS - float 속성

float 이란 단어의 의미는 "뜨다" 라는 의미를 가지고 있으며 박스나 이미지를 어떻게 띄워서 다른 요소와 함께 배치할 것인가를 결정합니다. 레이아웃 배치에 많이 사용됩니다.

속 성	설 명
float	요소를 어느 쪽에 배치할 것인가를 설정. none | left | right 중 하나.
clear	앞서 설정한 float 속성을 무효화 시킴. none | left | right | both 중 하나 both이면 left와 right 모두를 무효화시킴.

flaot 를 이용한 레이아웃 예제입니다.

<style>
.use-container {
  height: 200px 
 }
.use-nav{
  width: 200px;
  height: 40px;
  border: 1px solid #000;
}
.use-body .use-left-menu{
  /* 왼쪽에 배치 */
  float: left;

  width: 50px;
  height: 154px;
  border: 1px solid #000;
}
.use-body .use-content{
  /* 왼쪽에 배치 */
  float: left;

  width: 148px;
  height: 154px;
  border: 1px solid #000;
}
.use-body .use-content .use-article{
  height: 100px;
}
.use-body .use-content .use-comment{
  height: 50px;
  border-top-width: 1px;
  border-top-color: #000;
  border-top-style: solid;
}
.use-footer {
  /* float 속성을 해제 */
  clear:both;

  width: 200px;
  border: 1px solid #000;
}
</style>

<div class="use-container">
  <div class="use-nav">top</div>
  <div class="use-body">
    <div class="use-left-menu">left</div>
    <div class="use-content">
      <div class="use-article">article</div>
      <div class="use-comment">comment</div>
    </div>
  </div>
  <div class="use-footer">footer</div>
</div>

top

left

article

comment

footer

이미지가 어떻게 떠있으면서 배치되는지 확인해 볼 수 있습니다.

<style>
.hh1 {
  border: 1px solid #000;
  padding: 10px;
}
.hh1 img {
  float: left;
  padding-right: 10px;
}
</style>

<div class="hh1">
  <img src="image/ara.jpg">'How to Train Your Dragon 3' 
Debuts with Franchise Best, $55.5 Million Debut
</div>

'How to Train Your Dragon 3' Debuts with Franchise Best, $55.5 Million Debut