프로그래밍을 배우기 시작했을 때 가로줄의 속성으로float를 배웠다.
실제로 코드를 쓰면 보기가 잘 안 보여요.
이런 경험 없어요?나는 겪은 적이 있다.
따라서 플로트에 대해 잘하지 못한다는 의식이 있다. 플로트를 사용한다면 플렉스박스가 아닐까 하는 느낌으로 플로트를 사용하지 않았다.
이번에는 투자조합 사이트를 사용할 때 일부러 사용할 기회가 있고 플로트에 대해 잘하지 못하는 의식이 없기 때문에 플로트를 잘하지 못하는 사람들에게 참고가 됐으면 합니다.

결론

부동 점: 왼쪽으로 이동할 요소

가로줄의 속성보다 이걸 이해하기 쉬워요.
float라고 쓰여 있어서 알아봐야 할 것 같아요.
실제로 보면 이해하기 쉬워요.

이런 느낌의 ↓

아래 요소를 살짝 보여줌으로써 굴러가는 느낌이 들더라고요.

실제 코드

  <div class="red"></div>
  <div class="under-red"></div>
  <div class="blue"></div>
  <div class="under-blue"></div>
  <div class="green"></div>

.red{
  width: 50vw;
  height: 33vh;
  background-color: red;
  border-bottom-left-radius: 30% 10%;
  border-bottom-right-radius: 30% 10%;
  float: left;
}
.under-red{
  width: 50vw;
  height: 33vh;
  background-color: blue;
}

.blue{
  width: 50vw;
  height: 33vh;
  background-color: blue;
  border-bottom-left-radius: 30% 10%;
  border-bottom-right-radius: 30% 10%;
  float: left;
}

.under-blue{
  width: 50vw;
  height: 33vh;
  background-color: green;
}

.green{
  width: 50vw;
  height: 33vh;
  background-color: green;
}

이번 사용법.

1. 먼저 빨간색, 파란색, 녹색의 상자를 준비하고 빨간색, 파란색 아래의 모서리를 둥글게 한다
2. 밑에 놓인 상자를 위쪽 상자와 같은 크기로 준비(이번이라면 언더레드는 언더블루)
3. 떠다니고 싶은 요소에 float: left 적용

총결산

예전에는 잘 몰랐어요. 못하는 의식이 있어도 시간을 내서 뒤돌아보고 의외로 알았기 때문에 지금은 몰라도 괜찮아요!
플로트와 flexbox를 능숙하게 사용하고 싶어요.