normal flow
, float
, position
normal flow
에 따라 레이아웃이 결정되는데 float
, position
을 사용할 경우 normal flow
에 벗어나게 됨. normal flow
에 속한 요소들은 normal flow
에서 벗어난 float
, position
속성이 적용된 요소들을 인식하지 못함. overflow
속성 부모요소에 추가overflow
은 bfc ; block-formatting-contexts
를 생성.
bfc
는 float
속성이 적용된 요소를 컨테이너가 인식하도록 만들어줌. 즉 부모요소가 자식요소의 float
를 인식하게 됨.
때문에 컨테이너 요소에 overflow:visible;
을 제외한 overflow:hidden;
혹은 overflow:scroll;
등 overflow
속성을 추가하여 해결 가능.
단점)
부모요소에 컨텐츠가 있는 경우, 자식요소가 부모요소를 넘어가는 경우 hidden
이면 짤리고 auto
하면 스크롤이 생김. 넘쳐흐르는 디자인이라면 overflow
속성 사용불가 -> bfc
요소 만드는 다른 방법인 position:absolute
, display:inline-block
사용
clear
속성은 바로 앞의 형제 요소가 float
받았을 때 따라갈지 안갈지 정함float
사용된 요소 바로 다음 형제 요소에 clear
속성 사용clear:both;
clear:both;
를 설정하여display:block;
대신 display:table;
을 사용하기도 함.after
를 자식으로써서 부모 자식을 해결하고clear:both
를 넣어 형제관계 까지 해결 .wrap::after {
content:'';
display:block;
clear:both;
}
display:inline-block
사용하면 블럭들 사이에 여백이 생기는데 이는 코드에서 엔터들이 여백으로 나타나기 때문이다. 이를 없애기 위해선 코드를 다 붙여써야한다.(또는 font-size:0을 주어 하나하나 바꾸던가 해야한다.) 때문에 inline-block
보단 float
사용하여 수평정렬을 하는 것이 좋다. vertical-align
이 인라인에 잡아먹히기 때문에 float
속성에다는 margin-top
으로 조절해준다. flex
는 flex
요소 안에 있는 자식들을 배치하는 요소기 때문에 감싸주는 태그가 반드시 필요하다. 즉 반드시 부모가 필요하기 때문에 html
태그 양이 늘어난다. float
는 부모, 형제요소를 통해 해결이 가능하기에 html
이 길어지지도 않고, 브라우저 호환성 면에서도 좋다.display:inline block
float