[SIST] Web_CSS_days04_CSS float 속성과 clear 속성

1. float 속성

1) float 속성이란?

  - 콘테츠의 위치를 지정하고, 형식을 지정하는데 사용하는 속성

  - 요소를 어떻게 띄울지 설정하는 속성

 

2. float 속성 값 : left, right, none(기본값), inherit

 

3. clear 속성과 함께 사용된다.(why? 다음 태그에 영향을 주지 않기 위해서)

 

2. clear 속성

1) float 요소 옆에 있는 요소에 어떤 일이 발생해야 하는지 지정하는 속성

 

2) clear 속성 값

  - none : (기본값) p 요소는 왼쪽 또는 오른쪽으로 float 되어있는 요소의 아래로 력되지 않는다.

  - left : p 요소가 왼쪽으로 float 되어있는 요소의 아래로 출력

  - right : p 요소가 오른쪽으로 float 되어있는 요소의 아래로 출력

  - both : p 요소가 왼쪽+오른쪽으로(위치 상관x) float 되어있는 요소의 아래로 출력

  - inherit : 상속 개념

 

<코드 예시>

 

<적용 결과>

> float된 요소가 컨테이너 영역보다 커져서 오버플로워가 발생할 때 overflow 속성을 사용하여 잡아준다.

---

<코드 예시>

 

<적용 결과>