css float, clear 속성

안녕하세요 선생님

float, clear 색상을 이용해 수업시간에 만든 것을 토대로 혼자 만들어보다가

의문이 생겼습니다.

부모요소에 border를 만약 1px 주고 width를 400px을 주고 자식 1,2요소에 각각 float:left 와 float:right를 줬다고 가정하면

자식1요소에 border를 1px 주고 width를 100px을, 자식2요소에 border를 1px 주고 width를 300px을 주면

border 두께때문에 안맞아 box-sizing 속성을 주면 자식 1, 2요소가 각각 왼쪽 오른쪽으로 두번째줄에 들어가야하는것이라고 생각했는데

생각처럼 안돼서 첨부사진과함께 여쭤봅니다.