생활코딩 CSS_9.8 Float

9.8 Float

---

글의 본문 안에 이미지를 삽화로 삽입할 때 사용하는 기능이다.

레이아웃을 잡을 때도 주로 사용한다.

Float 기본

---

일반적으로 이미지 <img> 와 문단 <p>를 나란히 배치 할 경우 마크업 순서에 따라 수직방향으로 배치된다.

 

이는 각 element가 자신의 영역을 차지하고 있는 것으로 볼 수 있다. 즉, 이미지 element가 페이지의 처음영역을 먼저 차지했기 때문에 문단 element는 그 다음에 위치해야 하는 것이다.

 

<!-- 이미지 다음에 Lorem ipsum 텍스트가 위치 -->

<img src = " ... ">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

 

Element를 '띄워서 (float)' element가 차지하고 있던 영역을 무시하고 다음 element를 배치할 수 있게 해 주는 속성이 Float이다.

 

Float을 이용하면 이미지를 둔(띄운)뒤 옆의 빈 공간에 글을 배치할 수 있다.

 

/*img 태그에 float값을 left 부여: 이미지를 왼쪽에 띄운다.*/

img{
    float: left;
}

 

float 속성이 가질 수 있는 속성값은 다음과 같다.

 

속성값	의미
left	element를 왼쪽에 떠 있도록 위치
right	element를 오른쪽에 떠 있도록 위치
none	element를 띄우지 않음 (default)

Clear

---

float 시킨 element 다음의 element들은 float 시킨 element 옆의 공간이 비어있으면 빈 공간을 채우는 방식으로 위치한다. 남아있는 빈 공간을 무시하고 아래에 element를 위치시키려면 float의 영향을 받지 않도록 해줘야 하는데 이를 위해 사용하는 속성이 clear이다.

 

다음과 같이 float의 영향을 받지 않을 element에 clear속성을 적용시킬 수 있다.

 

<!-- float의 영향을 받는 element -->

<img src = " ... ">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<!-- float의 영향을 받지 않는 element -->

<p style = "clear: both;">Voluptate minus, obcaecati quia eaque perspiciatis!</p>

 

clear 속성이 가질 수 있는 속성값은 다음과 같다.

 

속성값	의미
left	왼쪽에 float해 있는 element의 영향을 받지 않게 함
right	오른쪽에 float해 있는 element의 영향을 받지 않게 함
both	왼쪽과 오른쪽 상관 없이 float해 있는 element의 영향을 받지 않게 함
none	float의 영향을 계속 받음 (default)

Float 응용

---

float을 이용해서 Holy grail layout 만들기.

 

각 element를 순서대로 배치한 뒤 element 사이에 border를 그어준다.

 

/*navigation을 가장 왼쪽에 위치*/

nav{
    float: left;
    border-right: 1px solid gray; /*nav와 article 사이의 선*/
    margin-left: -1px; /*article의 left border와 일치시키기 위해 margin값을 줌*/
    width: 120px;
}

/*article을 nav 다음에 위치*/

article{
    float: left;

      /*nav와 article 사이의 선; 둘 중 하나에만 그으면 두 element의 크기가 달라졌을 때 border가 중간에서 끊기게 되므로 양쪽 다 그어줌 */
    border-left: 1px solid gray; 
    width: 360px;
}

/*aside도 nav-article과 유사하게 작성 (width: 120px)*/

 

Element들을 float으로 배열 할 경우, 모든 element를 배치시키기에 창의 폭이 충분하지 못하면 공간이 부족한 element는 줄바꿈된다. 창의 크기에 따라 element가 이동하는 것을 방지하기 위해 nav-article-aside를 담고있는 container의 크기를 고정시켜줘야 한다.

 

.container{
    width: 600px; /*nav-article-aside폭의 합으로 지정*/*
    margin: auto; /*창이 600px보다 클 경우 element들이 창의 중앙에 위치*/
}

* 위에서 지정한 nav, article, aside의 크기는 border를 포함하지 않은 값으로 실제 세 element의 폭의 합이 600px보다 클 수 있다. box-sizing을 쓰거나 border를 따로 계산해서 정해주는게 좋다.

참고

---

• 생활코딩 CSS-Float
• #5 Floating, Positioning by Jaehee's WEBCLUB