float
한 요소가 보통 흐름에서 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌 우측에 배치되게 함.
left : 왼쪽으로
right : 오른쪽으로
none : 기본값
inline, inline-block 요소에 float속성을 주게되면 block으로 계산되어 적용
float 해제하기
clear: both / right / left;
<style>
body {
font-family: sans-serif;
}
[class^="box"] {
width: 100px;
height: 100px;
background: rgba(141, 75, 246, 0.6);
color: #fff;
line-height: 100px;
text-align: center;
}
[class^="box"]:first-child {
background: rgba(46, 111, 242, 0.6)
}
[class^="box"]:last-child {
background: salmon;
}
.container {
background: skyblue;
}
.box:first-child,
.box:nth-child(2){
float: left;
}
.box:last-child {
clear: left;
}
</style>
<body>
<div class="container">
container
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
</body>
주의사항 : 자식 요소들이 모드 float 속성을 갖게 되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않음.
해결방법
- 부모에게 높이 값 지정하기
- overflow: hidden;
.container{
overflow: hidden;
}
- 부모의 가상 요소 ::after 사용
.container::after{
content: 'after';
display: block;
clear: left;
}
'HTML&CSS > CSS' 카테고리의 다른 글
| CSS 실습 - 글쓰기 페이지 CSS로 꾸며보기 (0) | 2023.08.22 |
|---|---|
| CSS(9) flex (0) | 2023.08.21 |
| CSS(7) form 관련 가상 선택자 (0) | 2023.08.20 |
| CSS(6) Box Model (0) | 2023.08.20 |
| CSS(5) display 속성 / 단위 (0) | 2023.08.19 |