float 된 div를 포함한 div의 백그라운드가 안 보일때, float된 div 높이가 브라우저에 인식 안될때 clear해주는 방법

IT 소프트웨어/CSS 2010/01/26 15:14
<div class="A">
   <div class="B"></div>
   <div class="C"></div>
</div>

위와 같이 상황에서 B,C를 각각 float:left; float:right; 를 시켰을 때
A에 적용한 백그라운드가 안보인다.
왜냐면 A 영역의 높이가 0px 되어 버리기 때문이다.

그 문제를 해결하기 위해 고민하다가 알아냈다..!!!

A에 overflow:auto; 해준다.

도움받은곳 : http://dailylog.tistory.com/19



위의 방법말고 일반적으로 많이 쓰는 방법은...
<div class="A">
   <div class="B"></div>
   <div class="C"></div>
   <div style="clear:both;"></div>
</div>


저작자 표시 비영리 변경 금지
크리에이티브 커먼즈 라이선스
Creative Commons License

'IT 소프트웨어 > CSS' 카테고리의 다른 글

header 있고 body 있을때 body가 100% 높이 유지하도록  (0) 2010/03/09
E:first-child, E:lang(c) 유용한 몇가지 CSS  (0) 2010/01/26
float 된 div를 포함한 div의 백그라운드가 안 보일때, float된 div 높이가 브라우저에 인식 안될때 clear해주는 방법  (10) 2010/01/26
IE8에서 이미지 사이의 여백 생기는 문제  (11) 2010/01/15
스크롤바 관련 CSS  (0) 2009/10/20
input 에 클릭하면 사라지고, out 되면 배경이미지가 나타나는 스크립트  (0) 2009/08/12
Posted by 주오때
TAG , ,
트랙백 0개, 댓글 10개가 달렸습니다

댓글을 달아 주세요

  1. 이럴수가 2010/02/04 17:58  댓글주소  수정/삭제  댓글쓰기

    도움이 많이 되었어요 고민이 됬었는데.
    감사합니다.
    float:left 높이 로 네이버 검색하니깐 나오네영

    • 주오때 2010/02/05 08:19  댓글주소  수정/삭제

      ^^ 감사합니다. 이럴수가님...
      auto로 했을때, 스크롤이 생기는 경우도 있으니 상황에 맞게 잘 사용하시면 될거 같습니다.^^

  2. 데미나인 2010/02/23 21:58  댓글주소  수정/삭제  댓글쓰기

    <div class="A">
    <div class="B"></div>
    <div class="C"></div>
    </div>
    <div class="D">
    </div>
    D에 clear:both; 해주어도 될거에요.

    • 주오때 2010/02/24 08:24  댓글주소  수정/삭제

      <div class="A">
      <div class="B"></div>
      <div class="C"></div>
      <div class="D"></div>
      </div>
      혹, 이렇게 해서 D를 clear 시켜주는거 말씀이신게 아닌지요..^^ 제 생각엔 D가 A안에 들어있어야 적용이 될거 같습니다^^ 저도 평소에 그런 방법을 주로 쓰구요..ㅎㅎ 좋은 글 감사합니다.~!

  3. 팬냥이 2010/06/07 19:07  댓글주소  수정/삭제  댓글쓰기

    이것때문에 한참을 찾다찾다 고생했는데..해결되었습니다..너무 감사합니당... ^^ 복받으실꺼에요...

  4. 미르봉 2010/09/10 15:14  댓글주소  수정/삭제  댓글쓰기

    아고 클리어도 다해보고 안되서 한참 고민했는데 해답을 여기서!! 고마워용~히히힝

  5. 미쓰하 2011/03/04 18:27  댓글주소  수정/삭제  댓글쓰기

    정보공유 감사합니다 ~~ 문제 해결했네용 ^^