추적 • delete_file_linux • dokuwiki_php_7_compatibility • comp-effects • sharpdevelop • parse

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- 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 escape}}
 ====== CSS Float 탈출하는 방법 ======
+=====방법 =====
+====float에 float으로 대응하는 방법====
-=====float에 float으로 대응하는 방법=====
 자식 엘리먼트 뿐만 아니라 부모에게도 float 속성을 부여하는 방법이다. 부모에게 float 속성을 부여하게 되면 부모 엘리먼트는 자식 엘리먼트의 높이를 반영함.
@@ 줄 10: / 줄 11: @@
 ( 예시  http://jsfiddle.net/webjin85/Aj3Mz/ )
-=====float에 overflow 속성으로 대응하는 방법=====
+====float에 overflow 속성으로 대응하는 방법====
 자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow: auto 또는 overflow: hidden 속성을 부어야는 방법이 있다.
@@ 줄 16: / 줄 17: @@
 ( 예시  http://jsfiddle.net/webjin85/RXnwx/ )
-===== float을 빈 엘리먼트로 clear 하는 방법=====
+==== float을 빈 엘리먼트로 clear 하는 방법====
 float값이 지정된 엘리먼트 뒤에 빈 엘리먼트를 넣고 빈 엘리먼트에 clear: both 속성을 부여하여 clear해주는 방법이다.
@@ 줄 22: / 줄 23: @@
 ( 예시  http://jsfiddle.net/webjin85/Jz54c/ )
-=====float을 가상 선택자 :after로 clear 하는 방법=====
+====float을 가상 선택자 :after로 clear 하는 방법====
 일단 가상 선택자를 알아보면 우리가 알고 있는 :link, :visited, :hover, :active, :focus는 모두 가상 선택자 이다. '가상 선택자'는 다시 '가상 클래스'와 '가상 엘리먼트'로 구분된다.
@@ 줄 30: / 줄 31: @@
 이렇게 가상의 엘리먼트를 생성 시킨 다음 display: block; clear:both; 처리를 추가하게 되면 의미 없는 빈 엘리먼트를 사용하지 않으면서도 엘리먼트를 이용하여 깔끔하게 float이 clear 된다.
 ( 예시  http://jsfiddle.net/webjin85/9D7bp/ )
+=====부트스트랩=====
+트위터 부트스트랩에서는
+부모에 ''clearfix''라는 클래스를 추가해주면 된다.
+<file>
+<div class="clearfix">
+  ... blah ....
+  ... blah ....
+</div>
+</file>
 =====같이 보기=====
   * http://webjin85.tistory.com/7
-{{tag>css float escape}}