<예제 기본 구조>
blockquote 와 p 모두 블록 요소이기 때문에 position을 제외하고 정렬하기 어려울 뿐더러 position을 사용해도 번거롭다.
float값을 left로 입력해주면 기존 블록 요소와 어울려 정렬된다.
float: left;
- float: left; - 왼쪽을 기준으로 요소 정렬. 진행 방향은 왼쪽에서 오른쪽
- float: right; - 오른쪽을 기준으로 요소 정렬. 진행 방향은 오른쪽에서 왼쪽
- float의 값은 left, right만 있다
position과 똑같이 부유 요소의 성격을 가지고 있어 블록 요소는 층위를 이루지만
텍스트는 구조 정렬에 반응한다.
브라우저 크기에 반응하며 공간이 있으면 값에 따라 이동하지만 공간이 없으면 아래로 떨어짐.
float는 부유요소로 기존의 흐름에서 벗어나기 때문에 float가 적용되지 않은 다른 요소들이
float 요소를 제외하고 순차적으로 정렬.
float가 적용된 요소는 부모의 가로값을 물려받지 못하기 때문에 콘텐츠만큼의 가로값을 가지게 됨
<style>
ul {
padding: 0;
list-style: none;
font-weight: bold;
font-size: 20px;
/* border: 1px solid #000; */
}
ul li {
padding: 20px;
margin: 10px 0;
}
ul .bg1 {
background-color: lightcoral;
}
ul .bg2 {
background-color: lightskyblue;
}
ul .bg3 {
background-color: lightgreen;
}
ul .bg4 {
background-color: lightseagreen;
}
#box1 li {
float: left;
}
</style><body>
<ul id="box1">
<li class="bg1">box1-1</li>
<li class="bg2">box1-2</li>
<li class="bg3">box1-3</li>
<li class="bg4">box1-4</li>
</ul>
<ul id="box2">
<li class="bg1">box2-1</li>
<li class="bg2">box2-2</li>
<li class="bg3">box2-3</li>
<li class="bg4">box2-4</li>
</ul>
<ul id="box3">
<li class="bg1">box3-1</li>
<li class="bg2">box3-2</li>
</ul>
</body>
box1-4 박스와 나머지 박스 사이에 공간이 충분하기 때문에 #box2의 박스들은 다음 줄에서 시작하는 게 아니라 box1-4의 오른쪽으로 붙어서 정렬되는데, 이런 상태처럼 float의 영향에서 벗어나려면 clear를 사용한다.
clear : float의 영향에서 벗어나기 위해 사용. left, right, both 값 사용
float와 position이 함께 적용된 경우 position이 우선 적용.
자식 요소에 float가 적용되면 부유 요소가 되기 때문에 부모 요소는 높이값을 잃는다. 아래 방법으로 해결 가능.
- 부모 요소에 높이값 작성 (권장 x)
- 부모 요소에 float 적용
- 부모 요소에 overflow 적용
- 부모 요소에 clearfix hack css 사용
부모 요소에 float 적용.
높이 값은 인식하지만, margin: 0 auto로 적용 중이던 중앙 정렬이 무효화 된다.부모 요소도 다른 층위로 이동했기 때문에 footer가 바로 아래 깔리게 된다.
부모 요소에 overflow: hidden / auto 적용.
높이 값도 인식하고 margin값도 적용되지만 콘텐츠가 넘치는 경우 hidden은 잘리고 auto는 스크롤바 생성.
부모 요소에 clearfix hack css 사용.
.clearfix::after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.clearFix::after {
content: "";
clear: both;
display: block;
}
'CSS' 카테고리의 다른 글
| [CSS] aspect-ratio / object-fit / object-position (0) | 2022.10.27 |
|---|---|
| [CSS] 수열 선택자 - 의사 클래스 :first-child / :last-child / :nth-child(n) (0) | 2022.10.25 |
| [CSS] 포지션 노출 순위 z-index (0) | 2022.10.25 |
| [CSS] position (0) | 2022.10.21 |
| [CSS] 테이블 스타일 table-style (0) | 2022.10.19 |