[CSS] CSS float, clear 속성
2023. 2. 7. 07:23ㆍCSS
1. float 속성
- float 사전적 의미는 뜨다, 띄우다, 뜨는 물건, 부유물 이라는 의미이다.
- 태그에 플로팅 속성을 준다면, 다른 태그에 영향 없이 왼쪽 또는 오른쪽으로 정렬하여 띄운다는 기본속성을 가짐
- 단, 위 또는 아래에 태그가 있거나 부모 태그가 있다면 예상치 못한 상황이 발생할 수 있는 것에 주목
| left | 요소를 왼쪽으로 정렬 |
| right | 요소를 오른쪽으로 정렬 |
2. clear 속성
- float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러싼 형태가 되거나 부유된 영역 아래(under)로 들어가게 된다.
- 이러한 문제를 해결하기 위해 그 전의 상태로 돌릴 경우 사용한다.
| both | 오른쪽/왼쪽 취소(가장 많이 사용) |
| left | 왼쪽 취소 |
| right | 오른쪽 취소 |
| none | 기본 값을 clear 값을 설정하지 않는 것과 같다. |
3. 예시
<body>
<section class="s1">
<h2>일반적인 DIV</h2>
<div>A</div>
<div>B</div>
</section>
<section>
<p>float: left 속성 DIV</p>
<div class="div-float left">A</div>
<div class="div-float left">B</div>
</section>
<section>
<p>float: right 속성 DIV</p>
<div class="div-float right">A</div>
<div class="div-float right">B</div>
</section>
<section class="s1">
<p>clear : both 속성 DIV</p>
<div class="div-float left both">A</div>
<div class="div-float left both">B</div>
</section>
</body>
<style>
* { padding: 0; margin: 0; }
section {
display: block;
height: 160px;
border-bottom: 1px dashed;
padding: 10px;
}
div {
border: 1px dotted rgb(48, 48, 48);
width: 100px;
height: 100px;
font-size: 30px;
background-color: rgb(204, 204, 204);
}
.s1 { height: 300px; }
.div-float { float: left; }
.left { float: left; }
.right { float: right; }
.both { clear: both; }
</style>
4. float 문제점
- float를 쓰게 되면 float 뜻 처럼 위에서 뜨게해서 공간을 차지하게 된다.
- 그렇게 되면 아래에 div 요소를 정렬할려고 만들게 되면 뜨게 된 요소 밑으로 들어가게 되어서 겹치게 되는 문제가 발생하게 된다.
- 그것을 해결하게 하기 위해서는 float 속성을 준 요소에 미리 높이를 설정하여 해결하는 방법이 있다.
- 그리고 clear:both 속성과 after 속성을 이용하는 방법이 있다.
'CSS' 카테고리의 다른 글
| [CSS] CSS 애니메이션 (0) | 2023.02.07 |
|---|---|
| [CSS] CSS 위치 지정 및 화면 중앙 배치 (0) | 2023.02.07 |
| [CSS] CSS 배경 이미지(background-image) (0) | 2023.02.07 |
| [CSS] CSS block vs inline, <div> vs <span> (0) | 2023.02.07 |
| [CSS] CSS 박스 모델, border, padding, margin (0) | 2023.02.07 |