차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 양쪽 이전 판이전 판다음 판 | 이전 판 | ||
| tech:css_float_clear [2015/12/05 15:57] – ↷ 문서 이름이 tech:css_float_escape에서 tech:css_float_clear(으)로 바뀌었습니다 V_L | tech:css_float_clear [2016/07/12 00:56] (현재) – 바깥 편집 127.0.0.1 | ||
|---|---|---|---|
| 줄 1: | 줄 1: | ||
| + | {{tag> | ||
| ====== CSS Float 탈출하는 방법 ====== | ====== CSS Float 탈출하는 방법 ====== | ||
| + | =====방법 ===== | ||
| - | + | ====float에 float으로 대응하는 방법==== | |
| - | =====float에 float으로 대응하는 방법===== | + | |
| 자식 엘리먼트 뿐만 아니라 부모에게도 float 속성을 부여하는 방법이다. 부모에게 float 속성을 부여하게 되면 부모 엘리먼트는 자식 엘리먼트의 높이를 반영함. | 자식 엘리먼트 뿐만 아니라 부모에게도 float 속성을 부여하는 방법이다. 부모에게 float 속성을 부여하게 되면 부모 엘리먼트는 자식 엘리먼트의 높이를 반영함. | ||
| 줄 10: | 줄 11: | ||
| ( 예시 | ( 예시 | ||
| - | =====float에 overflow 속성으로 대응하는 방법===== | + | ====float에 overflow 속성으로 대응하는 방법==== |
| 자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow: auto 또는 overflow: hidden 속성을 부어야는 방법이 있다. | 자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow: auto 또는 overflow: hidden 속성을 부어야는 방법이 있다. | ||
| 줄 16: | 줄 17: | ||
| ( 예시 | ( 예시 | ||
| - | ===== float을 빈 엘리먼트로 clear 하는 방법===== | + | ==== float을 빈 엘리먼트로 clear 하는 방법==== |
| float값이 지정된 엘리먼트 뒤에 빈 엘리먼트를 넣고 빈 엘리먼트에 clear: both 속성을 부여하여 clear해주는 방법이다. | float값이 지정된 엘리먼트 뒤에 빈 엘리먼트를 넣고 빈 엘리먼트에 clear: both 속성을 부여하여 clear해주는 방법이다. | ||
| 줄 22: | 줄 23: | ||
| ( 예시 | ( 예시 | ||
| - | =====float을 가상 선택자 :after로 clear 하는 방법===== | + | ====float을 가상 선택자 :after로 clear 하는 방법==== |
| 일단 가상 선택자를 알아보면 우리가 알고 있는 :link, :visited, :hover, :active, :focus는 모두 가상 선택자 이다. ' | 일단 가상 선택자를 알아보면 우리가 알고 있는 :link, :visited, :hover, :active, :focus는 모두 가상 선택자 이다. ' | ||
| 줄 30: | 줄 31: | ||
| 이렇게 가상의 엘리먼트를 생성 시킨 다음 display: block; clear:both; 처리를 추가하게 되면 의미 없는 빈 엘리먼트를 사용하지 않으면서도 엘리먼트를 이용하여 깔끔하게 float이 clear 된다. | 이렇게 가상의 엘리먼트를 생성 시킨 다음 display: block; clear:both; 처리를 추가하게 되면 의미 없는 빈 엘리먼트를 사용하지 않으면서도 엘리먼트를 이용하여 깔끔하게 float이 clear 된다. | ||
| ( 예시 | ( 예시 | ||
| + | =====부트스트랩===== | ||
| + | 트위터 부트스트랩에서는 | ||
| + | 부모에 '' | ||
| + | < | ||
| + | <div class=" | ||
| + | ... blah .... | ||
| + | ... blah .... | ||
| + | </ | ||
| + | </ | ||
| =====같이 보기===== | =====같이 보기===== | ||
| * http:// | * http:// | ||
| - | {{tag> | + | |