티스토리 뷰

수업/└HTML&CSS

[CSS]박스_레이아웃 속성 : float

onlyun 2022. 1. 3. 15:48

 

한글 문서에서 '그림 배치, 본문과 어울림'과 같은 의미

 

tag { float : left;} /*다음에 오는 요소의 왼쪽에 위치*/
tag { float : right;} /*이전 요소의 오른쪽에 위치*/

 

예시)

<head>
    <style>
        .a1{float:left;} <!--A를 B의 왼쪽에 위치시키겠다.-->
        .b1{float:left;} <!--B를 c의 왼쪽에 위치시키겠다.-->
        .c1{float:right;} <!--C를 B의 오른쪽에 위치시키겠다.-->
    </style>
</head>
<body>
    <p class="a1"> A </p>
    <p class="b1"> B </p>
    <p class="c1"> C </p>
</body>

 

float를 설정할 경우,

블록 요소, 인라인 요소가 무시됨. 그래서 블록 요소인 태그들이 딸려올라가기도 함.

 

그것을 방지하기 위해 clear 속성 설정

tag { clear:left; } /*앞서 설정한 float:left를 초기화*/
tag { clear:right; } /*앞서 설정한 float:right를 초기화*/
tag { clear:both; } /* 잘 모르겠으면 both. left, right 모두 초기화*/

초기화 해주면 이후로는 float의 영향을 받지 않음.

(초기화 하지 않으면 이후의 태그들이 float의 영향을 받아 딸려올라가기도 함.)

 

이미지 같은 것이 박스 영역을 벗어나는 경우,

박스 영역에 overflow : auto; 속성 사용

tag { overflow:auto;}

 

사용하기 까다로움(?) 번거로움.

float 영향받지 않으려고 clear 선언해줘야 한다거나 하는 등의.

 

그래서 레이아웃 구성할 때 "flex"를 이용한다. 보다 직관적임.

 

그러나 기존의 것들에는 float를 활용한 것들을

만나는 경우가 있으므로 알아야 한다.

 

그리고

신문 기사처럼 배치할 때는 float 속성을 사용한다.

저작자표시 (새창열림)

'수업 > └HTML&CSS' 카테고리의 다른 글

[CSS]박스_레이아웃 속성 : z-index  (0) 2022.01.03
[CSS]박스_레이아웃 속성 : flex  (0) 2022.01.03
[CSS]박스_레이아웃 속성 : position  (0) 2022.01.03
[CSS]박스(Box Model)  (0) 2022.01.03
[CSS]선택자_조합 선택자  (0) 2022.01.02
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/03   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함