float 속성을 따로 쓰는 이유
이 속성을 따로 정리하고자 한 이유는 CSS를 하면서 float를 제대로 활용하지 못하고 있는 것 같다는 생각이 들어서 내가 float를 제대로 이해하고 쓰는 게 맞을까? 생각해보니 단순히 왼쪽/오른쪽에 뜬다 정도밖에 모르는 것 같아서 확실하게 정리를 해보고자 글을 쓰게 되었다.
float
float: 속성값;none : float를 사용하지 않음.
left : 대상 요소를 공중에 띄워 왼쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치.
right: 대상 요소를 공중에 띄워 오른쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치.
float의 특징은 아래와 같다.
- float이 적용된 요소가 해당 방향으로 이동.
- float이 적용된 요소의 크기가 해당 요소 안의 콘텐츠 크기만큼 자동으로 인지.
(해당 요소가 인라인 요소라도 크기가 인지됨.)- float이 적용된 요소를 뒤따라오는 요소들이 달려듦.
- 달려드는 속성을 해지해줘야만 뒤따라오는 요소들을 다시 배치할 수 있음.
float 수평 정렬
다음과 같은 코드를 작성하게 되면,
div {
color: white;
}
.red-box {
background-color: red;
}
.blue-box {
background-color: blue;
}아래와 같이 화면을 꽉 채우는 box들이 두 개 생기게 된다.
이 코드에 float: left 속성을 넣어주게 된다면,
div {
color: white;
float: left;
}
.red-box {
background-color: red;
}
.blue-box {
background-color: blue;
}아래와 같이 콘텐츠 크기만큼의 너비를 가진 box들이 수평으로 정렬되게 된다.
float를 left와 right를 할 때 단순히 왼쪽에 뜨고 오른쪽에 뜨는 차이만 있을까?
float: left를 사용했을 때,
float: right를 사용했을 때
float 속성을 사용한 레이아웃
<body>
<div class="container">
<div class="box red-box">red-box</div>
<div class="box blue-box">blue-box</div>
</div>
</body> <style>
.container {
width: 400px;
padding: 1rem;
margin 0 auto;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
float: left;
}
.red-box {
background-color: red;
}
.blue-box {
background-color: blue;
}
</style>다음과 같은 코드를 작성하게 되면,
위와 같이 표시되게 된다.
부모요소가 자식요소의 공간을 제대로 인식하지 못하게 되는데, 그 이유는 float 속성 때문이다.
이를 해결하기 위해 clear 속성을 사용하거나 overflow를 사용해 float 속성을 해제시켜줘야 한다.
clear / overflow
.box {
width: 100px;
height: 100px;
}
.red-box {
background-color: red;
float: left;
}
.blue-box {
background-color: blue;
float: left;
}
.green-box {
background-color: green;
}<div class="box red-box">red-box</div>
<div class="box blue-box">blue-box</div>
<div class="box green-box">green-box</div>다음과 같이 빨간색, 파란색, 초록색 box를 작성해주면,
green-box가 콘텐츠만 보이고 background가 사라지게 된다. 실제로는 사라진 것은 아니고 빨간색 box 밑에 있게 되는 것인데, float 속성이 적용된 요소는 자신의 원래 위치를 보장 받지 못한다.
초록색 box를 정상적으로 보이게 하기 위해서는 clear 속성 또는 overflow 속성을 사용해주면 된다.
.box {
width: 100px;
height: 100px;
}
.red-box {
background-color: red;
float: left;
}
.blue-box {
background-color: blue;
float: left;
}
.green-box {
background-color: green;
clear: both;
}
