float 을 사용하는 방법

css 속성중 하나인 float 속성은

자신의 위치를 부모의 콘텐츠에서부터 상대적으로 배치하는 속성입니다.가장쉬우면서도 가장 어려운 속성이라고 할수 있겠네요.

자 우리는 개발자니까 코드로 이야기 하도록 하겠습니다.

CSS

   1:  <style>

   2:          .container

   3:          {

   4:              width:500px;

   5:              height:400px;

   6:              background-color:silver;border:1px solid black;

   7:              position:relative;

   8:              overflow:hidden;

   9:          }

  10:   

  11:          .item

  12:          {

  13:              width:80px;

  14:              height:80px;

  15:              vertical-align:middle;

  16:              background-color:yellow; 

  17:              margin:5px;

  18:              text-align:center;

  19:              top:5px;            

  20:              font-family:Arial;

                   float:none;

  21:          }

  22: </style>

HTML

   1:   <div class="container"> 

   2:          <div class="item">div1</div> 

   3:          <div class="item">div2</div> 

   4:          <div class="item">div3</div> 

   5:      </div>

위 코드로 실행을 해보면 아래와같은 형태로 div가 배치됩니다.

부모 컨테이너 div 영역에 자식 div item 들이 배치되어있습니다.
부모컨테이너에 종속적인 자식컨테이너 item 들에 대해서 float 속성을 모두 left 로 설정하면

부모 컨테이너 안에 아이템들이 왼쪽으로 정렬되어 보여집니다. right로 하면 당연히 오른쪽으로 기울겠죠?
HTML
   1:   <div class="container"> 
   2:          <div class="item">div1</div> 
   3:          <div class="item">div2</div> 
   4:          <div class="item" style="clear:both;">div3</div> 
   5:      </div>
그런데 여기서 3번 div만 float 속성을 없앤 상태로 하단에 배치하고싶다? 그러면 clear:both 속성을 이용하면 됩니다.
clear 속성은 오직 float 속성에만 적용됩니다.
clear:both 의 속성은 해당 엘리먼트에 대해서 float 속성을 해제한다고 이해하면 됩니다.
아래 이미지와 같이 div3은 float:left 속성을 해제한상태로 배치됩니다.
기본적인 float 의 속성은 아래와 같습니다.
none : float 속성을 설정하지 않습니다.
left : 왼쪽으로 배치
right : 오른쪽으로 배치
inherit : 요소를 감싸는 부모의 float 속성을 상속받음

■ 기본적으로 float 속성을 적용할때는 요소의 위치가 고정되면 안되기 때문에 position : absolute 와 같이 사용하면 안됩니다.
■ 부모 컨테이너 영역의 Width 가 자식 컨텐츠들의 총 width 보다 작으면 float 속성을 설정한 컨텐츠가 아래로 줄바꿈 됩니다.
더욱 상세한 내용을 원하신다면 아래 사이트를 참고해보세요
http://www.nextree.co.kr/p8796/
http://div.or.kr/css-studying/clear%20%EC%86%8D%EC%84%B1