[CSS] float, psuedo element

float

• 블록을 병렬적으로 배치하기 위해 사용한다.
• display : inline, inline block, block인 box에 float 속성을 추가하면 display: block 으로 변한다.
• 속성이 block이기 때문에 inline일때 사용하지 못했던 width, height, padding,margin…등의 속성을 적용할 수 있다.
• 하지만 기존 display:block 이었던 component들이 자신의 행에 margin을 둬 다른 component가 들어오는것을 막았던 것과 달리 float으로 block 속성을 적용할 경우 다른 component들이 box의 위치를 빙 둘러서 영역을 차지하게된다.
• 속성에 float 안 넣는게 더 쉽게 표현할 수 있을듯 너무 복잡함

float 적용한 box 빙 둘러 다른 박스가 차지하는 것을 막는 방법

• parent component에 overflow : hidden 속성을 추가한다.

.parent {
  width: 400px;
  margin: 0 auto;
  background-color: whitesmoke;
  overflow: hidden;
}
.parent::after {
  content: "";
  display: block;
  clear: left;
}
.child {
  width: 200px;
  height: 200px;
  float: left;
  ...;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}

• psuedo element를 만들어 clearfix 하기.MDN clear 속성 공식문서

.parent {
  ...;
}
.parent::after {
  content: "";
  display: block;
  clear: left;
}
.child {
  width: 200px;
  height: 200px;
  float: left;
  ...;
}
.red {
  ...;
}
.blue {
  ...;
}
.green {
  ...;
}

child component 세개가 float:left 이기 때문에 parent의 가장 마지막 자식을 pseudo로 만들고 display:block ( clear 속성을 사용하기 위해서는 display: block이어야한다 ), float:left 이기 때문에 clear : left 속성을 추가해준다.

• 동일한 내용의 clearfix를 중복해서 작성하는 것은 번거롭다. 따라서 clearfix 클래스를 따로 만들어서 clearfix가 필요한 곳에 clearfix class를 추가해주는 것도 좋은 방법이다.

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

psuedo element

• 가상요소 html의 틀을 구현하기 위해 사용하지 않는 빈 element를 작성하는건 좋지 않다.html을 위해 가짜 element를 css로 구현한다.MDN pseudo element 공식문서
• content : "" content에 들어갈 내용이 없어도 content 요소를 필수로 작성해야한다.
• ::after는 선택된 요소에 마지막 자식을 만든다. content의 속성으로 cosmetic content를 만드는데 사용된다.

.child::before {
  content: "😀";
}
.child::after {
  content: "😀";
}