TIL_Code lion_ HTML/CSS

박상욱·2022년 2월 21일
0

HTML/CSS에 대해 복습했다.
알고 있던 내용들이었지만, 헷갈리는 CSS property에 대해서 복습하는 계기가 되었다.

**float 해제

float와 overflow의 상관관계

float이라는 속성은 주어진 요소뿐만 아니라 주변의 요소들의 배치에도 영향을 주어서 사용하기 까다로운 속성 중에 하나다. float 속성을 레이아웃이나 요소의 배치에 사용하게 될 때 함께 사용되어야 하는 작업이 float의 영향에서 해제시키는 방법이 있다.

하지만 이 방법에도 치명적인 단점이 있다. 만약 이 부모 요소 안에 부모의 영역을 벗어나는 팝업과 같은 자식 콘텐츠가 있다고 가정한다면 그 팝업의 내용이 보이지 않는 현상이 일어난다.

overflow의 유일하고 가장 큰 단점 중에 하나.

그래서 이 방법을 사용하여 float을 해제할 때는 이처럼 안에 내용 중에 부모의 내용을 넘쳐나서 노출되는 콘텐츠는 없는지 확인이 될 때 사용하여야 한다.

[https://www.boostcourse.org/web344/lecture/47666?isDesc=false] 참조
[https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/] 참조

여러가지 방법이 있다.

결국,Element가 배치되는 방법(CSS layout)에 대해 정리가 필요하다.

Element가 배치되는 방법(CSS layout)-1
링크텍스트

Element가 배치되는 방법(CSS layout)-2
링크텍스트

profile
기획,디자이너,개발 찍먹파입니다.

0개의 댓글