NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


float을 clear하는 4가지 방법.

본문 건너 뛰기

CSS 속성 가운데 float 속성은 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성입니다. float은 사전적 의미로 ‘뜨다, 띄우다, 뜨는 물건, 부유물’ 이라는 의미가 담겨져 있습니다. float은 높이가 가변적인 다단 컬럼 형태의 CSS 레이아웃을 위하여 반드시 요구되는 속성으로서 처음 CSS 배치기법을 익힐 때 가장 이해하기 어려운 속성중의 하나 입니다. float 속성이 부여된 엘리먼트는 좌측이나 우측으로 배치되면서 주변 콘텐츠의 배치에도 영향을 미친다는 사실은 어렵지 않게 학습되나 ‘float 된 엘리먼트가 부모 엘리먼트의 높이에 영향을 주지 않는다는 사실’은 몇 번의 경험 또는 선배들의 조언으로 깨닫게 되는 것이지요.

오늘은 float 속성을 이해하고 다단 컬럼형 레이아웃을 시도할 때 주변 엘리먼트들이 원하는 상태로 배치될 수 있도록 이것에 대응하거나 clear 하는 방법에 대하여 공유하고자 합니다. clear 속성은 float이 더이상 주변 엘리먼트의 배치에 영향을 미치지 않도록 해제시키는 속성입니다. 만약 Internet Explorer 브라우저를 사용하여 학습을 시도하신다면 일단 멈추시고 표준계열 브라우저에서 먼저 시도해 보세요. CSS 표준 렌더링을 엄격하게 준수하는 Opera와 Safari를 권장합니다. Internet Explorer와 Firefox 브라우저는 float, clear 속성에 관한 버그를 포함하고 있으므로 float과 clear의 표준 렌더링이 어떻게 구현되는지를 학습할 때 도움이 되지 않습니다. 하지만 버그를 해결하는 방법도 소개되어 있으니 안심하세요.

오늘 글의 핵심은 ‘float된 자식 엘리먼트의 높이를 부모 엘리먼트에 반영하도록 대응하는 방법’ 이라고 한마디로 설명할 수 있겠습니다. 부모 떠난 자식을 다시 부모의 품 안으로 돌아오도록 하려면 어떻게 해야 하는지 한번 살펴 보시죠.

float에 아무런 대응도 하지 않은 상태

#container는 부모 엘리먼트이며 #lnb와 #content는 자식 엘리먼트로서 현재 float된 상태 입니다. 아래 예제는 float에 아무런 대응을 하지 않으면 자식 엘리먼트가 부모 엘리먼트의 높이에 영향을 주지 않는다는 사실을 보여주고 있습니다. #container의 높이가 자식 엘리먼트의 높이를 반영하지 않고 있다는 사실에 주목해 주세요. float에 아무런 대응도 하지 않은 상태의 예제가 준비되어 있습니다.

float에 아무런 대응도 하지 않은 상태의 예제

float에 float으로 대응하는 방법

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에게도 float 속성을 부여하는 방법이 있습니다. 부모에게 float 속성을 부여하게 되면 부모엘리먼트는 자식 엘리먼트의 높이를 반영합니다. 하지만 부모 엘리먼트의 너비는 float된 두 자식의 너비를 담을만큼만 작게 줄어든다는 사실에 주목해 주세요. 부모의 너비가 브라우저 크기에 따라 가변적이어야 하는 경우에 적용하기 어려운 단점이 있습니다. 또한 조상 엘리먼트들이 겹겹이 존재하는 경우 자식의 높이를 조상 엘리먼트에게 각각 전달하기 위하여 조상 엘리먼트들을 모두 float 시켜야 하므로 일반적으로 사용하는것을 권장하지 않습니다. float에 float으로 대응하는 방법 예제.

float에 float으로 대응하는 방법 예제

float에 overflow 속성으로 대응하는 방법

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow:auto 또는 overflow:hidden 속성을 부여하는 방법이 있습니다. overflow:auto 속성은 자식의 너비가 가변적이고 부모의 너비보다 커지는 상황이 발생할 때 가로 스크롤바를 유발하기 때문에 일반적으로 권장하는 방식이 아닙니다. overflow:hidden 속성은 그러한 상황에서 가로 스크롤바를 유발하지는 않지만 자식의 너비가 넘치는 경우 넘치는 부분이 잘리기 때문에 이 역시 완전하게 안전한 방법은 아닙니다. float에 overflow 속성으로 대응하는 방법 예제.

float에 overflow 속성으로 대응하는 방법

float을 빈 엘리먼트로 clear 하는 방법

이 방법은 #container 영역이 끝나기 직전 빈 엘리먼트를 넣고 빈 엘리먼트에 clear:both 속성을 부여하여 부모가 자식의 높이를 인식하도록 하는 방법입니다. 하지만 의미 없는 빈 엘리먼트를 사용하기 때문에 이 역시 권장되는 방법은 아닙니다. float을 빈 엘리먼트로 clear 하는 방법 예제. 예제에서는 .clear 라는 빈 엘리먼트를 가시적으로 보이도록 하였지만 실무에서는 보통 .clear {clear:both; height:0; overflow:hidden;} 처리하여 .clear 라는 빈 엘리먼트가 스스로 높이를 갖지 않도록 하고 보이지 않도록 처리 합니다.

float을 빈 엘리먼트로 clear 하는 방법 예제

float을 가상 선택자 :after로 clear 하는 방법

가장 탁월하다고 생각하는 방법 입니다. 우선 ‘가상 선택자‘라는 개념을 이해하셔야 하기 때문에 약간 상세히 설명드리겠습니다. 여러분들이 익히 알고 계시는 :link, :visited, :hover, :active, :focus는 모두 가상 선택자 입니다. ‘가상 선택자’는 다시 ‘가상 클래스‘와 ‘가상 엘리먼트‘로 구분할 수 있는데요. ‘가상 클래스‘는 특정 엘리먼트에 대하여 아무런 class를 부여하지 않았지만 마치 역동적으로 class를 변경한것과 같은 효과를 낼 수 있는 것들로서 이미 존재하는 엘리먼트에 조합해서 사용할 수 있습니다.  :link, :visited, :hover, :active, :focus, :first-child가 가상 클래스에 해당됩니다. 한편 ‘가상 엘리먼트‘란, 존재하지 않는 엘리먼트를 가상으로 생성해내는 선택자로서 :first-line, :first-letter, :before, :after가 있습니다. 심지어 :before와 :after는 HTML문서상에 존재하지 않는 콘텐츠를 출력시키기도 합니다.  Hello World Collection이라는 웹 사이트에 신현석님이 ‘Hello World’라는 메시지를 어떻게 출력했는지 살펴보시면 재미있고 이해하기도 쉽죠. 이렇게 가상의 엘리먼트를 생성 #container:after {content:" "} 시킨 다음 display:block; clear:both 처리를 추가하게 되면 의미 없는 빈 엘리먼트를 사용하지 않으면서도 가상 엘리먼트를 이용하여 깔끔하게 float이 clear됩니다. float을 가상 선택자 :after로 clear 하는 방법 예제.

float을 가상선택자 :after로 clear 하는 방법 예제

상기 예제로부터 가상 엘리먼트가 스스로 높이를 갖지 않고 화면에 보이지 않도록 처리 하려면 아래와 같이 처리 합니다.

#container:after {content:""; display:block; clear:both;}

하지만 Internet Explorer는 :before, :after 가상 엘리먼트 선택자를 지원하지 않기 때문에 다음과 같은 Hack이 필요합니다. 

#container {*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */
#container:after {content:" "; display:block; clear:both;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */

IE 5~7 브라우저는 hasLayout이라는 고유한 성질을 갖게 되면 float을 해제하는 트리거로 작용하는 성질이 있고 zoom:1 속성이 hayLayout 이라는 성질을 갖도록 하기 때문에 IE 5~7 브라우저 고유의 특징을 이용한 해결방법 입니다.

float을 display:inline-block 으로 clear 하는 방법

float된 자식요소들의 높이를 부모에게 전달하는 방법으로써 부모 요소에 display:inline-block 속성을 부여하는 방법도 있습니다. [코멘트 해주신 김영환님 감사합니다] inline-block 속성이 부여된 요소는 float된 자식의 높이만큼 늘어납니다. [CSS 2.1 관련 설명 코멘트 해주신 연홍석님 감사합니다] 모든 브라우저가 동일하게 float을 해제하는 방향으로 작용합니다. 단, 표준계열 브라우저들은 부모 요소의 너비가 자식의 너비만큼 알맞게 줄어들지만 IE 6~7 브라우저는 100%의 너비를 갖게 되는 특징이 있습니다. 또한 inline-block 속성을 갖게 된 요소는 인라인 요소와 마찬가지로 박스가 끝나는 지점에 약 4px 정도의 공백을 갖게 되므로 이점 유념하시는게 좋겠습니다. 

참조

 

분류: CSS,웹 디자인,웹 표준 | 2008년 5월 27일, 6:59 | 정찬명 | 댓글: 167개 |
트랙백URI - http://naradesign.net/wp/2008/05/27/144/trackback/

167개의 댓글이 있습니다.

  1. 유미영 댓글:

    처음으로 글남겨요~
    8월에 생산성본부에서 교육받고 강사님께 메일보냈었는데 ^^;;(프레임기반 제품때문에 고민이라고 했던…) 저희 프레임 다빼고 신제품 만들고 있어요,,,괴롭다는 ㅠㅠ

    display:inline-block; 저도 어쩌다가 알게되서 사용하고는 있었는데
    맞는건지는 모르고 그냥 되길래 쓰고있었어요 ㅎ ^^;;;

    항상 여기와서 도움만 받고갑니다..

  2. 정찬명 댓글:

    유미영님, 프레임 없는 더 좋은 제품 만드시는 거잖아요. ^^ 많은분들이 더 좋은 제품을 만나게 되겠네요. 힘내세요! 뽜이링!

  3. 임미영 댓글:

    와..와..;ㅂ; 세세하면서도 한 눈에 들어오는 설명! ㅠㅠ 감사합니다!
    즐겨찾기에 등록해놓고 생각날때마다 와서 볼까합니다!

  4. 손병익 댓글:

    안녕하세요 이런좋은 곳이 있었다니 뒤늦게 안것이 아쉽습니다.
    좋은정보 감사드립니다.

  5. 정찬명 댓글:

    손병익님 반갑습니다. 자주 들러 주시고 다르거나 더 좋은 의견 있으면 언제든 말씀 주세요. ^^

  6. 익명 댓글:

    궁금한것이 하나있는데요…
    width 값을 넣어주면 정상적으로 컨텐츠와 네비게이션이 위치되던데…
    width 값을 주면 뭔가 문제가 발생이 되나요?

  7. 정찬명 댓글:

    @익명
    아마도 IE 6~7 브라우저에서 그런 현상을 보시는 것 같은데요.
    표준에 따른 렌더링 방식은 아닙니다.
    IE 6~7 브라우저는 width 값을 부여하면 hasLayout 이라고 하는 IE 전용 속성이 발생하는데 이게 영향을 미치는 것 같습니다.
    다른 표준계열 브라우저들은 width 값을 부여한다고 해서 float과 관련하여 어떤 변화가 발생하지는 않습니다.

  8. 익명 댓글:

    아~~ 확인해 보니까 그렇군요 ^^!
    미처 다른 브라우져에서 확인을 안하고 질문을 드렸네요 ^^:

  9. 윤군 댓글:

    꽃피는 4월입니다. ^^
    질문하나 드리려고 왔습니다 ^^:

    다름이아니라 작업을 하다보니 궁금해서요…
    container:after를 왜 사용해야하는 지는 알겠는데요…

    웹 접근성 연구소 페이지를 뜯어보니까..
    container부분이 가상엘리먼트를 사용하지 않았는데도 잘 나오더라고요..
    그래서 그대로 따라해 보았는데 저는 위 예제처럼 컨테이너가 높이값을 갖지 못하는 문제가 발생하더라고요..

    가끔 웹 사이트들을 보면 가상엘리먼트나 display:inline-block를 사용하지 않아도 별 문제 없는 사이트들이 보이더라고요..
    그래서 더 헷갈리는거 같은데요…

    궁금한것인즉…자식을 갖는 부모의 높이값이 적용이 안되는것이 정상적인것 인가요?
    참 질문을 하려니 말이 제대로 안나오네요 ^^:

    더 쉽게 질문 하자면 …. 가상엘리먼트나 위에 예시들처럼 float해제 방법을 사용하지 않아도 부모의 높이값이 제대로 나오는 경우는 그저 운이 좋아서 그런것인가 해서요…

  10. 정찬명 댓글:

    @윤군

    웹 접근성 연구소에는 :after 라는 가상 선택자가 사용되지 않았음에도 불구하고 float이 해제되는 효과가 발생했는데 이걸 어떻게 이해해야 하는지 설명해 달라는 질문으로 해석 됩니다.

    말씀하신 대로 웹 접근성 연구소는 :after 라는 가상 선택자가 사용되지 않았지만 대신 다음과 같은 코드가 #Contents 영역에 사용 되었습니다.

    #Contents { min-height:390px; width:952px; }

    사실 float이 clear 된 것 처럼 보이지만 clear 되지는 않았고 마치 clear 된 것처럼 보이도록 min-height를 사용 했습니다. 표준계열 브라우저(FF, SF, CR, OP)와 IE 7~8 브라우저는 min-height 속성을 지원하기 때문에 높이값이 반영 되었죠. 이런 코드는 콘텐츠의 높이가 가변적으로 변하는 영역에는 사용할 수 없는 단점이 있습니다. 내부 자식 콘텐츠 영역의 높이가 늘어날 때 마다 min-height를 늘려줘야 하니까요.

    문제는 IE6 인데요. IE6는 부모에 width 값만 주어도 자식의 float을 해제해 버리는 버그가 있는데 이것을 이용한 것입니다. width 값이 들어가 있죠. 이것을 빼 보시면 IE6에서 깨지는 것을 확인할 수 있습니다. 이 코드는 width 값이 가변적인 상황에서는 사용할 수 없는 단점이 있는 것입니다.

    즉, 웹 접근성 연구소는 콘텐츠의 너비와 높이가 고정되었다는 특징을 이용해서 이 상황에만 맞는 float clear 효과를 구현한 것입니다. 핵을 사용하지 않았다는 점에서 칭찬할만한 일이지만 너비와 높이가 가변적인 상황에서는 사용할 수 없는 코드 입니다.

  11. 윤군 댓글:

    아~
    ㅎㅎ 속시원하네요…지식을 하나하나 얻다보면 이것저것 답답한게 많은데
    친절히 설명해주셔서 감사합니다.

    정말이지 복 받으실거예요^^~~

  12. 이혜란 댓글:

    오늘도 고맙습니다.

  13. 닭발은세개 댓글:

    항상 좋은 정보 많이 얻어가고 있습니다. ^^
    테스트 중에 문제가 좀 있는 것 같더라구요.

    after 라는 가상 엘리먼트가 적용되는 대상이 어떻게 되나요?

    스타일을 아래와 같이 주고
    #box {
    float: none;
    *height: 1%;
    padding: 0 5px;
    }

    #box:after {
    content: “”;
    clear: left;
    display: block;
    }

    #box {
    *zoom: 1;
    }

    .list, .list li {
    float: left;
    }

    아래와 같이 태그를 주면 float이 제어되지 않는 것 같더라구요.

    [div id=”#box”]
    [ul class=”list”]
    [li]1[/li]
    [li]2[/li]
    [li]3[/li]
    [li]4[/li]
    [li]5[/li]
    [/ul]
    [/div]

    after는 div에 제한적인건지요? 이 방법으로 게시판의 리스트를 만들어 보려는데
    float이 제어되지 않고 빈 div 엘리먼트로 클리어 해주면 되더라구요. 혹시 제가 잘못한
    것이 있는지요? ^^;

  14. 닭발은세개 댓글:

    [div id=”#box”] 는 [div id=”box”] 입니다. 오타가 있었네요. ^^

  15. 닭발은세개 댓글:

    -_-;;; 이런….
    해결됐습니다. 드림위버는 after 라는 가상 엘리먼트를 출력하지 못하네요.
    브라우저로 보면 되네요. 질문을 삭제하려 했지만 삭제기능이 없어 댓글로
    남깁니다.

    하드코딩하는데 레이아웃 잡을 땐 가끔 드림위버를 쓰는데 안되는 줄 알고
    몇시간을 헤맸네요… 드림위버의 문제였습니다. 앞으로는 하던대로 Coda로
    코딩해야겠네요.

  16. 정찬명 댓글:

    @닭발은세개
    해결되셨다니 다행입니다. ^^ 정확히 말하면 드림위버의 위지윅 모드 렌더링이 CSS 표준에 따라 출력되지 않는 현상인거겠죠.

  17. 마포레이서 댓글:

    공공쪽 표준화 작업중 궁금한것이 있써서 질문드려요
    정찬명님 글을 참고하여
    저도 가상선택자를 이용해서 클리어를 시켰썼습니다..

    근데 요즘 *zoom:1; 이런핵을 사용하면 http://validator.kldp.org/ 여기에
    마구마구 걸리는데… ㅠㅠ

    모 공공쪽이다보니 유효성 검사 다 통과해야하고
    클리어는 시켜야게꼬,,,

    오똑캐야 하나요?? ㅠㅠ

  18. 정찬명 댓글:

    @마포레이서
    CSS 유효성까지 충족하라는 지침이 영 제 마음에 들지는 않지만 통과 하시려면 어쩔 수 없이 핵을 별도 파일로 분리하신 다음 IE 조건부 주석으로 감싸서 링크 하셔야겠네요.

    조건부 주석(Conditional Comment)으로 제 블로그 또는 검색엔진에서 찾아보시면 사용법을 금방 찾을 수 있으실껍니다.

  19. 마포레이서 댓글:

    ㅇ ㅏ 그것도 알고는 있었지만 혹시 다른방법이 없나해서 혹시나해서 저만 모르구있나해서요ㅠ
    (왕따느끼는 1인 ㅠㅠ )

    참 ~ 누구를위한 표준화이며 호환성 이며
    항상 여기와서 위로는 받지만 ..

    ㅇ ㅏ~~ 님금님 귀는 당나귀기~~~

    훔 밥뿌실텐데 빠른시간 답변 주셔서 감사합뉘다 .
    수고하셔요 =3=3=3=

  20. 김무건 댓글:

    @마포레이서
    저는 *zoom:1 대신에 height:100% 사용합니다.

  21. 마포레이서 댓글:

    @김무건

    ㅇ ㅏ 감사합뉘다

  22. 레이' 댓글:

    와우. >ㅁ< 푸터에 사이드바를 넣고 float 정렬하다가 다 튀어나와서 깜놀했지 뭐에요.
    덕분에 깔끔하게 해결했습니다. 감사드려요.
    아직 생초보라 많은 부분 부족하군요;;

  23. 정찬명 댓글:

    @레이
    float으로 레이아웃 잡는데 성공하셨다면 이미 생초보라 부르기 어렵습니다. ㅎㅎ

  24. 옥창원 댓글:

    지금까지 의미없는 빈 엘리먼트를 삽입하여 clear하다가
    덕분에 이제야 가상선택자(:after)를 알게되었네요.
    감사합니다.

  25. 민트지니 댓글:

    float, clear, display…
    제가 제일 못하는 것 세 개 ㅠㅠㅠ

    아직도 어렵네요
    다시 한 번 찬찬히 읽어봐야 겠어요

    정보 감사합니다 ^*^

  26. 황원준 댓글:

    display: inline-block를 사용할 경우 표준브라우저에서는 +3px의 우측 마진을 가지고 있습니다.
    핵을 사용(css 2.0 셀렉터를 사용하여 우측마진을 주시면 6, 7을 포함하는 구형 IE브라우저에는 해당되지 않는 inline-block을 만들 수 있습니다.
    / 예를들면
    ul li span { display: inline-block;}
    ul li > span { margin-right: -3px;}
    이 경우 셀렉터가 적용되는 브라우저가 여백을 갖지 않게 하여 width를 통한 inline-block요소간의 크로스브라우징 레이아웃을 가능하게 합니다.

    P.S. 다른 버그를 찾다가 이 글을 보게됐는데요, IE6의 경우 clear: both 이후에 padding-top 을 하게 되면 이 padding을 두배로 계산하는 버그도 있더라구요. 어찌된건지 찾아보고 있습니다만… 혹시 아신다면 shoolovu앳naver.com으로 메일 한번 주시면 감사하겠습니다 ㅜㅜㅜㅜ

  27. 댓글:

    안녕하세요. 책보고 공부하다 블로그에 포스팅 했었는데 여기 더 자세한 글이 있었네요. 참고하기 위해 링크 걸겠습니다.

  28. 서네 댓글:

    링크퍼갑니다 :)

  29. 그물고기의 생각…

    div 태그에서 float 에 대한 정리…

  30. 최윤정 댓글:

    이것 때문에 속 썩었는데 어쩜 글도 잘 쓰시고
    정말 설명이 쏙쏙 와 닿았네요.
    너무너무 감사드려요.
    큰절 드려요!!!

    크으으으은절……꾸벅..

  31. 뻔난이 댓글:

    우와.. 너무 감사합니다.. css스타일을 잘 몰라 힘들었는데
    박스정렬이 이것으로 잘 되네요.. 자주 보고 갑니다 많은 정보 부탁드려요~

  32. 송이 댓글:

    현재 우리 회사에서 일하시는 퍼블리셔분들은 빈 엘리먼트를 추가하여 float을 clear하는 방법을 많이 쓰시더라구요..
    그 방법이 최적의 방법이 아니라는 것을 어느정도 인지한다고 해도 막상 가상선택자가 아직 익숙치않아 그런것이라 생각됩니다.

    찬명님의 이 글을 함께 보면 좋을 것 같아요 ^^

    좋은 글 잘 보고 갑니다.

  33. meat 댓글:

    정말 필요한 정보였는데 감사합니다. 학생이라 하나 더 배우고 가네요!

  34. […] float를 clar하는 4가지 방법 바로가기 […]

  35. kairi 댓글:

    죄솝합니다.. 스크랩 해가면서 글을 못남겼네요.. ㅡㅡ;
    핑계지만 댓글쓰는곳을 못찾았다는 …

    아무튼 너무 도움이 되는 자료고요, 담아갈께요..

  36. 이햐 댓글:

    float을 display:inline-block 으로 clear 하는 방법,
    이것 덕분에 바로 해결되었어요~ 감사합니다!!!

  37. 정찬명 댓글:

    @이햐
    display:inline-block 요소는 우측에 4px 공백 발생하는것 유념 하시구요. ^^

  38. 박찬영 댓글:

    하나 명심해야 할 것은

    ELEMENT:after 를 쓰실때

    ELEMENT 대상이 되는 DIV에는 float 속성이 있어선 안됩니다.
    Float 이 설정되어있지 않는 DIV에 :after 를 걸어주세요

  39. 오후네시반 댓글:

    전 overflow:hidden; 속성을 주로 쓰는데요^^

    가상선택자 :after 방법은 다 좋은데 zoom 속성이 css 밸리데이션에서 걸리더라구요.
    css 검사야 무시 할수도 있지만, 관공서 같은 경우에는 행안부 웹호환성 점검에서 감점 요소가 되니 할수 없이 다른 방법을 쓰게 되더군요.

  40. 최군 댓글:

    저도 관공서의 css validation때문에…….^^
    zoom 대신에 min-height:80px;height:auto !important;height:80px 를 쓰긴하는데..
    이게 괜챦은건지..어떤건지……….

  41. 김소진 댓글:

    정리가 넘 잘되있네요~ 보기도 넘 편하고 좋아여~ 이제 막 웹표준시작하는데 참고하기 좋네요~ 저에게 필요한 부분을 알려주셔서 감사합니다^^

  42. 정찬명 댓글:

    @김소진
    저도 웹에서 선배들에게 배운겁니다. ^^

  43. VV 댓글:

    우아아악..

    좋은 글입니다.

    추천!

    감사합니다.

  44. 최성훈 댓글:

    헤더와 풋터를 상단과 하단에 픽셀로 고정시키고
    중간의 컨텐츠만 유동적으로 커졌다 작아졌다 하면서 overflow만 auto로 하고 싶은데 방법이 없을까요?

  45. 정찬명 댓글:

    @최성훈
    신현석님의 글을 참고해 보세요. http://hyeonseok.com/pmwiki/index.php/Css/Height

  46. 힘없는염소 댓글:

    좋은정보 감사합니다.

  47. […] 여기를 참고하자. 나라디자인 정찬명님 링크 […]

  48. MS 댓글:

    서핑하다 와서 봤습니다만

    다수의 퍼블리셔 업무간에서는 절대 사용해서는 안되는 방법입니다

    이렇게 하면 된다… 참 편리한 말입니다만

    가장 중요한 것은 누구든 사용할 수 있게 코딩하는 것입니다.

    float 는 규격화 시켜서 사용하지 않으면 단 한사람이 코딩하는 사이트를 벗어날 수 없습니다

    고깝게 보지 마시고 한국의 퍼블리셔 발전을 위한 말로 생각해주시기 바랍니다.

  49. 정찬명 댓글:

    @MS
    저는 정답을 제시한 것이 아니라 여러가지 시행착오와 고민을 공유하자는 생각에 이런 글을 썼는데요. 어떤 부분이 옳지 않다고 생각하는지 구체적으로 알려주시면 더 고민해 볼께요.

  50. code monkey 댓글:

    @MS

    float class 를 주지 말라는 내용은 이 본문 어디에도 적혀있지 않네요.

    #footer {width:100%; min-width:480px;}
    .floatleft {float:left}

    Are you happy now? LOLOLOLOL
    이제 만족하시냐구요? ㅋㅋㅋㅋㅋ

    div 명이 semantic 해야 된다는걸로 이제 또다른 딴지를 거실가봐, 그 답변은 링크로 대신 합니다.

    http://stackoverflow.com/questions/6222731/should-css-class-names-like-floatleft-that-directly-describe-the-attached-styl

  51. […] 나라디자인블로그:정찬명 float을 clear하는 4가지 방법. […]

  52. […] 참조 : http://naradesign.net/wp/2008/05/27/144/ […]

  53. 강진규 댓글:

    몇가지 궁금한 점이 있습니다.
    after를 사용해서 float 시키는 방법은 알고 있는데
    content:””; clear:both; display:block;
    여기서 display:block은 무슨 의미 인가요?
    블락과 인라인의 개념은 알고 있구요
    float 해제 시에 display:block 이 왜 필요한 것인가가 궁금합니다.
    display:block을 안써주면 어떻게 되는지??

  54. 정찬명 댓글:

    @강진규
    clear:both 속성은 display 속성이 inline 또는 inline-block 인 경우 적용할 수 없기 때문에 display:block 속성을 사용해야 합니다. 명세에서는 이렇게 설명하고 있어요.

    “when applied to non-floating block-level boxes”
    http://www.w3.org/TR/CSS2/visuren.html#flow-control

  55. 익명 댓글:

    좋은 정보 감사합니다..

  56. 슬랩스틱 댓글:

    늦게봤지만 무지 좋은글이네요

  57. 익명 댓글:

    정말 멋진 글 입니다.
    어떻게 해결해야할 지 막막했던 문제가 한 번에 해결되었네요.

    감사드립니다.

  58. 익명 댓글:

    굿

  59. 됐다아아아아아 댓글:

    대박입니다. float에 inline-block 넣어도 죽어도 안 돼서 무지하게 고민했는데 :after {content:””; display:block; clear:both;} 한방으로 끝났습니다.

    설명도 기술적이고 친절해서 굿굿 베리굿굿입니다. 정말 감사합니다. 여기 자주 들러야 겠어요!!!!!!!!!!!!!!!!!!!!!!!!!!!

  60. 구레 댓글:

    설명 감사합니다!
    clear:both;, content:””, *zoom:1 그동안 줄기차게 공식처럼 쓰기만 했었는데
    친절한 설명이라 알기 좋게 잘 설명이 되었어요

  61. 미도리 댓글:

    이렇게 정리를 잘해주시다니!
    많은 도움이 되었습니다.고마워서 댓글남기고 가요!
    정말 감사합니다.

  62. 익명 댓글:

    유용한글 잘봤습니다.
    담아 갑니다.
    감사합니다.

  63. 여니 댓글:

    정말 감사합니다 덕분에 골치덩어리를 없애주셨네여 ~~

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님