9. 플로트(Float)
(1) 플로트의 개념
- 플로트는 블록, 인라인 요소를 좌우 정렬한다.(기준은 부모요소를 기준으로)
- 플로트가 적용되면 자신의 자리를 다음에 오는 블록요소에게 내어준다.
- 플로트요소는 플로트요소끼리만 정렬하며 일반요소와는 정렬하지 않음
- 예시) float: left;
(2) 플로트와 일반요소가 함께 있는 경우
■ 작성법
- float에 적용하는 값은 left, right
- 플로트 적용시 자신이 있는 위치에서 부모요소를 기준으로 왼쪽 또는 오른쪽 정렬을 한다.
- 자신의 자리를 다음 요소에게 내어줌. 다음에 오는 요소는 플로트 요소 아래에 배치됨
■ 예시1
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 32 33 34 35 36 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Float</title> <style type="text/css"> *{margin:0; padding:0;} .box1{width: 50px; height: 50px; background-color: #f00;} .box2{height: 100px; background-color: #0f0;} .f1{float: left;}/*left, right, both */ .f2{float: right;} .aa{width: 100px; height:100px;} .aa1{background-color: #f00;float:left;} .aa2{background-color: #0f0;float:left;} .aa3{background-color: #00f;float:right;} .aa4{background-color: #ccc; height: 150px;} </style> </head> <body> <h2>플로트와 일반요소1</h2> <div class="box1 f1"></div> <div class="box2"></div> <h2>플로트와 일반요소2</h2> <div class="box1 f2"></div> <div class="box2"></div> <h2>두개 이상의 플로트와 일반요소</h2> <div class="aa aa1"></div> <div class="aa aa2"></div> <div class="aa aa3"></div> <div class="aa aa4"></div> </body> </html> |
■ 실행결과1
※ aa1 플로트 왼쪽 적용시 aa2는 aa1 하위에 배치
※ aa2를 플로트 왼쪽 적용시 aa1이 미리 자리를 선점하고 있으므로 aa2는 aa1 옆으로 배치됨(플로트는 플로트끼리 정렬)
(3) 플로트 객체가 여러개가 만날 때
■ 예시2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Float2</title> <style type="text/css"> *{margin:0; padding: 0;} .box1{width: 100px; height:100px; background-color: #f00; float: left;} .box2{width: 200px; height:100px; background-color: #0f0; float: right;} .box3{width: 300px; height:100px; background-color: #00f; float: right;} .box4{width: 400px; height:100px; background-color: #0ff; float: left;} </style> </head> <body> <h2>플로트객체가 여러개가 만날 때</h2> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> </body> </html> |
■ 실행결과2
※ float: left; → 왼쪽에서부터 순서대로 1,2,3,4 형태로 붙게 된다.
※ float: right; → 오른쪽에서부터 순서대로 붙게 되므로, 화면에서 볼 때 4,3,2,1 형태로 보인다.
※ 브라우저 크기를 바꿔가면서 테스트해보세요.
※ 플로트 객체는 x축 선상의 2개 이상의 플로트 객체가 있을 경우에 선의 오브젝트를 제외한 나머지 오브젝트는 자신의 공간이 확보되지 않으면 자동 개행 되면서 정렬한다.
(4) 계층구조에서의 float
■ 부모의 높이가 없어지며, 부모가 자식을 감싸지 못하는 경우(잘못 작성한 경우임)
- 부모요소의 height를 자식요소가 생성하고 있을경우에 자식요소에 float적용시 부모요소의 height는 사라짐
- 계층구조에서 자식요소에 절대포지션 또는 고정배치가 적용될 경우 자식요소가 부모요소의 height를 생성하지 못함
■ 부모에 강제로 높이를 만드는 경우(권장안함)
- 자식요소의 height가 유동적일 경우 매번 부모요소의 height의 값을 변경해주어야 함(권장안함)
- 부모요소에도 float선언. (권장안함. float적용시 absolute처럼 width가 없을 경우 콘텐츠의 크기만큼 width값이 변경됨)
- 의미없는 div하나 생성하여 clear: left; 또는 clear: right;로 해제 (권장안함)
★ 부모요소가 자식요소를 감싸는 권장방법!!(w3c에 있는 clear fix hack)
content:'(공백)';인 :after(인라인 요소)의 양쪽을 float해제(clear:both;)후, display: block;을 선언한다.
방법 → 선택자:after{content:''; clear:both; display: block;}
■ 예시3
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Float3</title> <style type="text/css"> *{margin:0; padding:0;} .parent{border: 5px solid #f00; background-color: #ccc;} .parent .child{width: 100px; height: 100px; background-color: #f0f;} .c1{float: left;} .c2{position: absolute;} .p3{height: 100px;} .c3{float: left;} .p4{float: left;} .c4{float: left;} .clear{clear: left;} .c5{float: left;} .p6:after{content:''; clear:both; display: block;} /* 권장 방법 */ .c6{float: left;} </style> </head> <body> <h2>부모의 높이가 없어지는 경우1</h2> <div class="parent"> <div class="child c1">자식요소</div> </div> <div style="height: 200px;"></div><!--강제높이 생성--> <h2>부모의 높이가 없어지는 경우2</h2> <div class="parent"> <div class="child c2">자식요소</div> </div> <div style="height: 200px;"></div><!--강제높이 생성--> <h2>부모의 높이 만들기1</h2> <div class="parent p3"> <div class="child c3">자식요소</div> </div> <div style="height: 200px;"></div><!--강제높이 생성--> <h2>부모의 높이 만들기2</h2> <div class="parent p4"> <div class="child c4">자식요소</div> </div> <div style="height: 200px;"></div><!--강제높이 생성--> <h2>부모의 높이 만들기3</h2> <div class="parent p5"> <div class="child c5">자식요소</div> <div class="clear"></div><!--의미없는 div하나 생성(권장안함)--> </div> <div style="height: 200px;"></div><!--강제높이 생성--> <h2>부모의 높이 만들기4(권장방법)</h2> <div class="parent p6"> <div class="child c6">자식요소</div> </div> </body> </html> |
■ 실행결과3
※ <div style="height: 200px;"></div><!--강제높이 생성-->
이부분은 예시를 보여주기 위해 쓴 것으로,
내용을 보실 때는 생략하시면 됩니다.
(5) clear 속성을 이용한 float 해제
- 상위요소의 플로트는 유지하면서 플로트 다음에 오는 일반요소에게 플로트가 적용되는 요소를 일반요소처럼 설정하는 속성
- 플로트의 위치에 따라 left, right, both를 사용
■ 예시 4-1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Float4</title> <style type="text/css"> *{margin :0; padding:0;} .aa{width: 100px; height: 100px; background-color: #f00;}/*빨강*/ .bb{width: 150px; height: 150px; background-color: #0f0;}/*초록*/ .cc{height: 50px; height: 100px; background-color: #ff0;}/*노랑*/ .aa1{float: left;} .bb1{float: left;} .cc1{clear: left;} </style> </head> <body> <h3>clear:left</h3> <div class="aa aa1"></div> <div class="bb bb1"></div> <div class="cc cc1"></div> </body> </html> |
■ 실행결과 4-1
■ 예시 4-2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Float4</title> <style type="text/css"> *{margin :0; padding:0;} .aa{width: 100px; height: 100px; background-color: #f00;}/*빨강*/ .bb{width: 150px; height: 150px; background-color: #0f0;}/*초록*/ .cc{height: 50px; height: 100px; background-color: #ff0;}/*노랑*/ .aa1{float: left;} .bb2{float:right;} .cc2{clear: both;} </style> </head> <body> <h3>clear:both</h3> <div class="aa aa1"></div> <div class="bb bb2"></div> <div class="cc cc2"></div> </body> </html> |
■ 실행결과 4-2
■ 예시 4-3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Float4</title> <style type="text/css"> *{margin :0; padding:0;} .box{width: 500px; border: 10px solid #000; } .box:after{content:''; display: block; clear: both;} .left{width: 200px; height: 50px; background-color: #f00; float: left;} .right{ width: 300px; height: 100px; background-color: #00f; float: left;} .bottom{background-color: #0f0; height:100px; clear: both;} </style> </head> <body> <div class="box"> <div class="left">left</div> <div class="right">right</div> <div class="bottom">bottom</div> </div> </body> </html> |
■ 실행결과 4-3
※ float 속성을 이용해 4-3과 같은 결과물을 만들 수가 있습니다. 이로써 일반적으로 웹사이트에서 보이는 형태의 레이아웃을 만들 수 있게 됐네요^^
이전에 설명드린 display 속성과 함께 꼭 기억하세요. 아주 중요한 개념이랍니다.