이번에는 그림과 같은 변화를 목표로 한다.

before

after

주어진 코드

html

css

모드 A

step1

box1, 2의float에서 left를 지정합니다.
그래서 문제가 생겼다.우회가 일어나다.'부동틀'이라는 특수한 틀이 다른 틀에서 뜨는 존재로 바뀌었기 때문이다.

단계 2

box1, 2를 boxA로 조합합니다.

단계 3

boxA::after
·content:“”;
(boxA 다음에 무엇을 넣을까).
글자를 붙이면 알겠지만 가로로 늘어서 있다.디스플레이는 인라인이고,float는 left이기 때문이다.

단계 4

boxA::after
・display:block;
·clear:both;에서 설명한 대로 해당 매개변수의 값을 수정합니다.
(clear는 부동 속성에서 왼쪽 정렬 또는 오른쪽 정렬을 지정한 요소에 배치하는 데 사용됩니다.)
그래서 완성!

코드

모드 B

step1

box1, 2의float에서 left를 지정합니다.

단계 2

box1, 2를 boxA로 그룹화합니다.

단계 3

boxA에서
overflow:hidden;에서 설명한 대로 해당 매개변수의 값을 수정합니다.
이 상자는 CSS의 Block formatting context가 되어 상자 안에 부동 상자를 수납하고 표시하는 규정이 됩니다.
⚠주의: 상자를 초과한 하위 요소는 숨깁니다.

코드