블록 요소의 흐름(float)

 

일반적인 블록 요소의 흐름을 줄 바꿈입니다.

 

 <div style="background-color:#22ff11; ">div1</div>
 <div style="background-color:#aaffaa; ">div2</div>
 <div style="background-color:#aaff00; ">div3</div>

 

위 코드는 아래와 같은 결과를 나타냅니다.

 

[일반적인 블록 요소의 흐름]

 

 

 

float 속성을 사용하여 흐름의 변화

 

float 속성을 사용하면 흐름의 변화를 줄 수 있습니다.

 

 <div style="background-color:#22ff11; float:left">div1</div>
 <div style="background-color:#aaffaa; ">div2</div>
 <div style="background-color:#aaff00; ">div3</div>

 

위 코드는 결과는 다음과 같습니다.

 

[div1에 left 값을 부여하여 흐름을 변경한 예]

 

이 때 div의 너비와 높이을 지정해 보겠습니다.

 

 <div style="background-color:#22ff11; float:left; width:100px; height:100px;">div1</div>
 <div style="background-color:#aaffaa; ">div2</div>
 <div style="background-color:#aaff00; ">div3</div>

 

위 코드는 다음과 같은 결과를 나타냅니다.

 

 

float 속성을 준 div1은 일반적인 흐름에서 제외되고 나머지 요소들이 div1을 감싸는 형태로 변경되었습니다. 이 때 div3에서 줄바꿈을 하고 싶다면 div3에 clear 속성을 부여합니다.

 

 <div style="background-color:#22ff11; float:left; width:100px; height:100px;">div1</div>
 <div style="background-color:#aaffaa; ">div2</div>
 <div style="background-color:#aaff00; clear:both;">div3</div>

 

위와 같이 작성하면 다음과 같이 출력됩니다.

 

[흐름을 끝는 예제]

 

div2에 margin-top 속성을 부여하면 다음과 같이 출력됩니다.

 

 <div style="background-color:#22ff11; float:left; width:100px; height:100px;">div1</div>
 <div style="background-color:#aaffaa; margin-top:50px;">div2</div>
 <div style="background-color:#aaff00; clear:both;">div3</div>

 

[div2에 상단 마진을 부여한 예]

 

흐름은 좌측, 상단을 기준으로 시작하는 것입니다. 해당 요소가 시작하는 위치는 죄측, 상단입니다.

 

이 때 div3의 float 속성에 right를 부여하면 다음과 같은 결과를 출력합니다. 

 

 <div style="background-color:#22ff11; float:left; width:100px; height:100px;">div1</div>
 <div style="background-color:#aaffaa; margin-top:50px;">div2</div>
 <div style="background-color:#aaff00; float:right;">div3</div>

 

[div3의 float 속성에 right를 준 경우]

 

위와 같은 경우 div3의 위치는 우측, 최상단이 시작위치가 됩니다.

 

 

이런 흐름을 지정한 후 요소를 추가하면 전체적으로 흐름은 다음과 같이 출력됩니다.

 

 <div style="background-color:#22ff11; float:left; width:100px; height:100px;">div1</div>
 <div style="background-color:#aaffaa; margin-top:50px;">div2</div>
 <div style="background-color:#aaff00; float:right;">div3</div>
 <div style="background-color:#ccff55; ">div4</div>
 <div style="background-color:#cc3355; ">div5</div>

 

[여러 요소가 복합적으로 적용되 예]