TIL/Web(HTML, CSS, JS, jQuery)
[SIST] Web_CSS_days04_CSS float 속성과 clear 속성
야리니
2022. 5. 24. 20:41
728x90
반응형
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 속성을 사용하여 잡아준다.
<코드 예시>
<적용 결과>
728x90
반응형