CSS Float

CSS Float

한 요소(element)가 정상 흐름(normal flow)으로부터 빠져,

텍스트 및 인라인(inline)요소가 그 주위를 감싸 요소의 좌/우측을 따라 배치되는 것을 지정한다. (블록 요소는 아니다!!)

본래는 이미지 좌, 우측 주변으로 텍스트를 둘러싸는 배치 용도로 도입 (ex. 신문형식)

더 나아가 이미지가 아닌 다른 요소들에도 적용해 웹 사이트의 전체 레이아웃을 만드는데까지 발전했다.

 

Float 속성

• none : 띄우지 않음 (기본 값)
• left : 선택한 요소를 왼쪽으로 띄움, 페이지 내용은 박스 오른쪽에 위치
• right : 선택한 요소를 오른쪽으로 띄움, 페이지 내용은 박스 왼쪽에 위치
• inherit : 부모 요소로부터 상속함

 

Float clear

float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰인다.

• none : 기본 값으로 clear를 설정하지 않은 것과 같다.
• left : 좌측 float 제거
• right : 우측 float 제거
• both : 양쪽 모두 제거

선택한 요소의 맨 마지막 자식으로 가상 요소를 하나 생성

보통 content속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용

선행 floating 요소 다음일 수 있는지 또는 그 아래로 내려가야(해제되어, cleared) 하는지를 지정

clear 속성은 부동 및 비부동 요소 모두에 적용된다.

float된 것의 부모에 작성한다.(class="clearfix")

 

after 가상선택자와 clear

clear 해주기 위해서는 float된 요소 다음에 clear하는 태그를 따로 삽입해야 하는 불편함이 있다.
이때 아래와 같이 가상 선택자를 활용하면 이 문제를 해결할 수 있다.

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

부유를 제거하고 싶은 컨테이너에 class="clearfix"를 적용

 

• CSS에서 ::after는 선택한 요소의 맨 마지막 자식으로 의사요소를 하나 생성한다.
• 보통 content 속성과 함께 짝지어, 요소에 장식용 컨텐츠를 추가할 때 사용한다. (기본값은 인라인이다.)
• 위 코드는 아래요소를 위로 못올라오게 하기위해 display: block;을 설정

* 참고, https://developer.mozilla.org/ko/docs/Web/CSS/::after

::after (:after) - CSS: Cascading Style Sheets | MDN