- float 속성
: 좌우로 배치할때
float : left;- margin으로 위치조정
- rignt 도 상관없음
float 속성값
- none : 띄우지 않음 (기본값)
- left : 왼쪽에 띄움
- right : 오른쪽
- initial : 기본값으로 설정함
- inherit : 부모 요소로부터 상속함
float를 이용할때 생기는 이슈
- 부모역할 부분이 자식이 float설정이 되었을때 자식으로 인식못하는 경우가 있어서 위치가 제각각이 됨→overflow:hidden;
- →이것들로 해결
- →overflow:auto;
- 겹치는 박스가 float를 무시할때가 있음→ clear : both; (양쪽 다 맞추기)
- → clear : left; (위의 속성에 맞춰야 함)
예시코드
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<footer></footer>
</body>
</html>CSS
.wrap {
background-color:slategray;
padding:0.5rem;
width:300px;
box-sizing:border-box;
overflow:hidden;
}
.wrap > div {
background-color:#333;
width:50px;
height:50px;
margin:0.5rem;
color:#fff;
float:left;
}
footer {
width:300px;
height:100px;
background-color:#bb3;
margin-top:0.5rem;
clear:left;
}float와 overflow의 관계
- 하위 엘리먼트에 float를 주었을 경우, 상위 엘리먼트의 overflow에는 auto 혹은 hidden으로 부여해야 한다.
'웹공부 > CSS' 카테고리의 다른 글
| CSS 선택자 정리 (0) | 2022.02.03 |
|---|---|
| CSS - 태그 종류 (0) | 2021.09.28 |
| CSS - 인라인(inline)요소와 블록(block)요소 (0) | 2021.09.28 |
| CSS 의 구성 (0) | 2021.09.28 |
| CSS 란? (0) | 2021.09.28 |