728x90
| 개요
float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 중간에서 끊기(제거)위해 사용됩니다.
방향에 따라 3가지 속성으로 사용됩니다.
- left : 왼쪽 부유 제거
- right : 오른쪽 부유 제거
- both : 양쪽 모두 제거
| 예제
<html>
<head>
<style>
.float-container{ width: 320px; border: 2px solid #09c; }
.float-container img{ float: left; margin: 5px; padding: 5px; border: 2px solid #90C; }
</style>
</head>
<body>
<div class="float-container">
<img src="/images/attach/earth.jpg">
<p>This is first line with floating image.</p>
<p style="clear: both">This is second line with cleared property.</p>
</div>
</body>
</html>
| 결과값
This is first line with floating image.
This is second line with cleared property.
| 레이아웃에서의 clear
float 속성이 레이아웃에서 많이 사용되고 있는데, clear속성도 float를 레이아웃에서 사용하며 발생되는 문제를 해결하기 위해 많이 사용됩니다.
float속성을 적용한 태그는 붕 뜨며 정상적인 요소로 처리가 안되기 때문에
아래에 나타나야 하는 내용이 부유된 태그의 중간에 나타나는 문제 및 상위 태그의 높이가 없어지는 문제 등이 발생하게 됩니다.
<style>
.box-container{
width: 350px;
border: 2px solid #09c;
background-color: #d7f5ff;
}
.box-container .box{
width: 80px;
height: 40px;
border: 2px solid red;
background-color: #ffe7d5;
}
</style>
<div class="box-container">
<div class="box" style="float: left">박스1</div>
<div class="box" style="float: right">박스2</div>
</div>
<div>박스 아래에 나타나야 하는 내용</div>
| 결과값
박스1
박스2
박스 아래에 나타나야 하는 내용
<div class="box-container">
<div class="box" style="float: left">박스1</div>
<div class="box" style="float: right">박스2</div>
<div style="clear: both"></div>
</div>
<div>박스 아래에 나타나야 하는 내용</div>
| 결과값
박스1
박스2
박스 아래에 나타나야 하는 내용
| after 가상선택자와 clear
clear를 해주기 위해서는 float된 요소 다음에 clear하는 태그를 따로 삽입해야하는 불편함이 있어, 이때 가상 클래스 선택자를 이용하면 이 문제를 해결할 수 있습니다.
부유를 제거하고 싶은 컨테이너에 다음 클래스를 적용시키면 문제가 해결됩니다.
.clearfix:after{ content: ""; display: block; clear: both }하지만 after가상 선택자는 IE(Internet Explorer)8 이하 버전에서 동작하지 않으며, 컨테이너 태그에 *zoom:1 이라는 옵션을 사용하면 비슷하게 문제가 해결됩니다.
<style type="text/css">
.clearfix{ *zoom: 1; }
.clearfix:after{ content: ""; display: block; clear: both }
</style>
<div class="box-container clearfix">
<div class="box" style="float: left">박스1</div>
<div class="box" style="float: right">박스2</div>
</div>
<div>박스 아래에 나타나야 하는 내용</div>
| 결과값
박스1
박스2
박스 아래에 나타나야 하는 내용
728x90
반응형
'즐거움 넘치는 IT 세계 > 코드로 만드는 디자인' 카테고리의 다른 글
| [ CSS 입문 ] cursor 속성 (0) | 2018.09.19 |
|---|---|
| [ CSS 입문 ] position 속성 (0) | 2018.09.18 |
| [ CSS 입문 ] float 속성 (0) | 2018.09.16 |
| [ CSS 입문 ] display 속성 (0) | 2018.09.15 |
| [ CSS 입문 ] visibility 속성 (0) | 2018.09.14 |
