CSS float속성과 clear:both 속성

안녕하세요 이번에는 css 속성중 layout을 담당하는 float에 관해서 알아보겠습니다.

layout은 웹페이지의 구조와 시각적 효과를 고려하여 구성과 배치를 하는 것입니다.

즉 구조 담당이죠~

<div>로 layout을 만들려고 하면 css 속성에서 넓이와 폭을 주면 됩니다.

근데 문제는 div는 속성이 블럭속성으로 넓이를 얼마를 주던간에 아래로만 깔리게 됩니다.

이렇게 말이죠 ~~~  OTL

우리가 원한 것은 이런 것인데 말이죠 ........

이때 등장해서 우리를 구원을 하는 것이 float 속성입니다.

float 속성은 전체 넓이가 지정되어 있지 않으면 계속 옆으로 붙고

더이상 자리가 없으면 아래로 자리잡게 됩니다.

위 속성을 이용하면 table 구조를 짤수 있습니다.

float 속성으로 구조를 잡으려면 블럭 속성을 가지고 있어야 합니다.

블럭속성이 머였지~~ CSS display속성 알아보기

그래야 넓이와 높이를 지정할수 있으니깐요~

결국 많이사용하는 태그인 <div><li> 같은 블럭 태그를 사용하여 배치를 합니다.

float은 크게 left와 right로 나뉘는데 

float:left 를 하면 왼쪽으로 붙게 되고

float:right 를 주면 오른쪽으로 붙게 됩니다.

1박스

2박스

3박스

4박스

float:left 을 주면 왼쪽부터 채워갑니다.

1박스

2박스

3박스

4박스

 float:right 을 주면 오른쪽 부터 채워갑니다. 

위 두개를 비교해보면 어떻게 박스들이 달라 붙는지 확실히 보입니다.

●  float:left  ●

<div class="red3">1박스

</div>

<div class="green3">2박스

</div>

<div class="blue3">3박스

</div>

<div class="yellow3">4박스

</div>

●  float:right  ●

<div class="red4">1박스

</div>

<div class="green4">2박스

</div>

<div class="blue4">3박스

</div>

<div class="yellow4">4박스

</div>

●  css  코드입니다  ●

●  float:left  ●

  .red3{border:1px solid black; width:50px; height:50px;  

         background-color:red; float:left;}

  .green3{border:1px solid black; width:50px; height:50px;  

           background-color:green; float:left;}

  .blue3{border:1px solid black; width:50px; height:50px; 

          background-color:blue; float:left; } 

  .yellow3{border:1px solid black; width:50px; height:50px; 

            background-color:yellow; float:left;}

●  float:right  ●

  .red4{border:1px solid black; width:50px; height:50px; 

         background-color:red; float:right;}

  .green4{border:1px solid black; width:50px; height:50px; 

            background-color:green; float:right;}

  .blue4{border:1px solid black; width:50px; height:50px; 

          background-color:blue; float:right; } 

  .yellow4{border:1px solid black; width:50px; height:50px; 

            background-color:yellow; float:right;}

근데 조금더 욕심을 내서 1박스 2박스 아래로 3박스 4박스를 넣고 싶습니다.

이때 도움을 주는 속성이 clear:both입니다.

1박스

2박스

3박스

4박스

<div class="red5">1박스

</div>

<div class="green5">2박스

</div>

<div class="blue5">3박스

</div>

<div class="yellow5">4박스

</div>

 

 .red5{border:1px solid black; width:50px; height:50px; 

        background-color:red; float:left;}

  .green5{border:1px solid black; width:50px; height:50px; 

           background-color:green; float:left;}

  .blue5{border:1px solid black; width:50px; height:50px; 

          background-color:blue; float:left; clear:both;} 

  .yellow5{border:1px solid black; width:50px; height:50px; 

            background-color:yellow;float:left;}

이렇게 만들기위해서 clear:both속성을 3박스에서 넣으면 됩니다.

clear:both속성은 float으로 뜨는 것을 방지하는 속성입니다.

이렇게 만들다보면 기본적인 레이아웃 구성이 가능합니다.

다음페이지는 float과 clear:both를 사용하여 

박스의 배치를 조금더 응용해보겠습니다.

응용편도 살펴보기