[CSS] float 속성

float 속성

float 속성은 객체를 띄워서 오른쪽이나 왼쪽으로 정렬할 때 사용하는 속성이다.
사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나,

사이트 레이아웃을 만들 때 사용한다.

 

※ 절대 위치 속성은 float 속성을 무시한다.

 

---

 

다음은 'img태그'에 float을 설정한 예시이다.

 

 

1. float 속성 적용 전

 

float 속성 적용 전

float 속성을 적용하기 전에는 이미지 바로 옆에 글자가 따라 나온다.

 

 

 

 

 

2. float: left 설정 후

 

float: left 설정 후

float: left를 설정하면, 이미지를 감싸듯이 텍스트가 정렬된다.

 

 

 

 

 

 

3. float: right 설정 후

 

float: right 설정 후

이미지가 오른쪽으로 정렬되고, float: left를 적용한 것과 같이 텍스트가 이미지를 감싼다.

 

 

 

---

clear 속성

 

float을 사용했을 때, 텍스트가 이미지 아래로 내려가게 하려면, clear 속성을 사용하면 된다.

clear는 '취소하다'라는 뜻으로 생각하면 적절하다.

 

 

clear 속성	뜻
clear: none	기본값. clear를 설정하지 않은 것과 같다
clear: left	float: left를 취소
clear: right	float: right를 취소
clear: both	float: left와 float: right를 모두 취소

 

 

 

 

1. <img>에 float: left, <p>에 clear: left 설정 후

 

이미지는 왼쪽, 텍스트는 아래에 배치된다.

 

 

 

 

 

2. <img>에 float: right, <p>에 clear: right 설정 후

 

이미지는 오른쪽, 텍스트는 아래에 배치된다.

 

 

 

 

 

 

3. 각각의 <img>에 float: left, float: right, <p>에 clear: both 설정 후

 

clear 설정한 객체는 모두 줄바꿈된다

 

 

---

overflow 속성

 

float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면,

해당 요소의 일부가 밖으로 흘러넘치게 된다.

이때 overflow 속성값을 auto로 설정하면,

컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커진다.

 

flow:right 속성만 있을 때

 

flow 속성만 있을 때는 위와 같이 이미지와 텍스트가 배치된다.

여기에 p태그에 overflow 속성을 추가한 후 속성값을 auto로 하면 다음과 같이 배치가 된다.

 

p태그에 overflow: auto 적용 후

overflow 속성값을 hidden, scroll로 바꿔도 비슷한 결과가 나온다.

요소를 출력하는 가로폭 전체를 줄이는 효과가 있다.

 

 

 

 

 

 

CSS float 속성 정리

속성	설명
none	띄우지 않음 (기본값)
left	왼쪽으로 띄움
right	오른쪽으로 띄움
initial	기본값으로 설정
inherit	부모 요소로부터 상속
clear	float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정
overflow	내용(content)의 크기가 해당 요소를 감싸고 있는 컨테이너 요소보다 클 때 어떻게 처리할지를 설정
overflow-x	내용(content)의 크기가 해당 요소의 수평 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정
overflow-y	내용(content)의 크기가 해당 요소의 수직 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정

  
    
   
   
   

 
 
 

플로팅(float) 레이아웃과 clear 속성

[css 기초] float 속성에 대하여

코딩교육 티씨피스쿨

CSS / float와 overflow