728x90
CSS
HTML
위와 같은 코드가 있다고 하면, 실제로 웹 브라우저에서는 아래와 같이 보인다.
(ie6에서는 감싸는 것처럼 보입니다.)
겉에 있는 핫핑크의 박스가 두 박스를 감싸지 못한다.
이것을 해결하려면 아래와 같은 방법이 있다.
1. redbox와 bluebox의 아래쪽에 div를 하나 더 만들어서 clear:both;를 넣어 주는 방법.
2. pinkbox에도 float:left;를 넣어 주는 방법
3. pinkbox에 height값을 넣은 눈속임
4. clearfix
1~3번은 사용이 간단하지만, 어느 것도 사용에 제약이 있다.
1. div를 추가로 넣어야 해서 사용하기 어려운 경우가 있다.
2. pinkbox 밖에서 다시 clear를 해 줘야 한다.
3. 세로의 길이가 가변적이어야 할 때는 사용하지 못한다.
가장 제약이 없는 방법은, :after 를 사용한 4번이다.
CSS
HTML
.pinkbox {width:324px;padding:5px;}
.redbox {float:left;width:150px;height:60px;padding:5px;}
.bluebox {float:right;width:150px;height:130px;padding:5px;}
.redbox {float:left;width:150px;height:60px;padding:5px;}
.bluebox {float:right;width:150px;height:130px;padding:5px;}
HTML
<div class="pinkbox">
<div class="redbox">
redbox
</div>
<div class="bluebox">
bluebox
</div>
</div>
<div class="redbox">
redbox
</div>
<div class="bluebox">
bluebox
</div>
</div>
위와 같은 코드가 있다고 하면, 실제로 웹 브라우저에서는 아래와 같이 보인다.
redbox
bluebox
(ie6에서는 감싸는 것처럼 보입니다.)
겉에 있는 핫핑크의 박스가 두 박스를 감싸지 못한다.
이것을 해결하려면 아래와 같은 방법이 있다.
1. redbox와 bluebox의 아래쪽에 div를 하나 더 만들어서 clear:both;를 넣어 주는 방법.
2. pinkbox에도 float:left;를 넣어 주는 방법
3. pinkbox에 height값을 넣은 눈속임
4. clearfix
1~3번은 사용이 간단하지만, 어느 것도 사용에 제약이 있다.
1. div를 추가로 넣어야 해서 사용하기 어려운 경우가 있다.
2. pinkbox 밖에서 다시 clear를 해 줘야 한다.
3. 세로의 길이가 가변적이어야 할 때는 사용하지 못한다.
가장 제약이 없는 방법은, :after 를 사용한 4번이다.
CSS
<style type="text/css">
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML
<div class="clearfix pinkbox">
<div class="redbox">
redbox
</div>
<div class="bluebox">
bluebox
</div>
</div>
<div class="redbox">
redbox
</div>
<div class="bluebox">
bluebox
</div>
</div>
이제, 아래처럼 정상적으로 보인다.
redbox
bluebox
728x90
'CSS' 카테고리의 다른 글
| clear (0) | 2013.01.25 |
|---|---|
| 익스플로어 6에서 png파일 투명하게 보이기 (0) | 2013.01.08 |
| CSS 스타일시트 속성정리 (0) | 2013.01.08 |
| CSS레이아웃-플로트를 이용한 2단 레이아웃 (0) | 2013.01.08 |
| CSS 레이아웃-중간 정렬하기 (0) | 2013.01.08 |
