CSS 심화 - Float

색상을 지정하지 않으면 글자 색상을 따른다.

.container {
  border: 4px solid;
}

border는 자동적으로 container 글자의 색상을 따른다. 글자는 기본적으로 black이다.

Float

요소들을 수평 정렬할 때 사용한다.

 <div class="container">
 	<div class="clearfix">
    	<div class="item float">1</div>
        <div class="item float">2</div>
        <div class="item float">3</div>
    </div>
    <div class="item four">4</div>
</div>
  

.container {
  border: 4px solid;
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  border-radius: 10px;
  font-size: 40px;
  margin: 10px;
}

.container .item.four {
  width: 150px;
  height: 150px;
  background-color: orange;
}

.float {
  float: left; /* 왼쪽으로 수평 정렬 */
}

.clearfix::after { /* clearfix 클래스를 가진 요소의 내부의 마지막 부분에 가상 요소 생성  */
  content: ""; /* 가상 선택자 after는 content 요소를 가지고 있어야 함 */
  display: block;
  clear: both; /* float 속성의 left, right 둘다 해제 */
}

Float를 사용할 때 주의해야 할 점

• 수평 정렬하는 요소만 clearfix 내부에서 관리
• Float 요소의 마지막 형제 요소에 clear를 부여해야 한다. (after 가상 선택자 사용)
• float 속성이 부여되면 display의 속성이 block으로 바뀐다. 단 특정 요소 제외 (flex, grid 등..)

오른쪽 정렬을 하고 싶을 때

 <div class="container">
    <div class="clearfix">
    	<div class="item float-left">1</div>
        <div class="item float-left">2</div>
        <div class="item float-right">3</div>
        <div class="item float-right">4</div>
	</div>
</div>

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}
.container {
  border: 4px solid;
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  font-size: 40px;
}

이전 형제가 오른쪽에 우선적으로 쌓이는 것을 볼 수 있다.
순서대로 변경하고 싶으면 3, 4 요소를 left로 정렬하고 정렬한 요소의 부모 요소를 만들어 right를 할당하면 된다.
이 때 float 속성이 부여가 되어있는 요소의 부모요소에는 역시 clearfix를 추가해줘야지 나중에 의도치 않은 문제가 발생하는 것을 방지할 수 있다.

 <div class="container">
 	<div class="clearfix">
    	<div class="item float-left">1</div>
        <div class="item float-left">2</div>
        <div class="float-right clearfix">
        	<div class="item float-left">3</div>
        	<div class="item float-left">4</div>
        </div>
 	</div>
 </div>