float 사용시 부모태그에서 해제 속성 지정

float 속성을 사용하면 해당 내용을 웹 페이지에 둥둥 띄워준다. 계속 플로트 속성을 사용할 수 없으니 속성을 해제해야 한다.

parent_tab::after {
  content: '';
  display: block;
  clear: both;
}

float은 형제 태그로 사용해야 한다. 그 위의 부모태그를 가상 엘리먼트 ::after와 함께 사용한다.

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

CSS에서, ::after는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.

developer.mozilla.org

부모 태그 안에서 플로트를 사용하며 부모 태그가 끝이 나면(::after) 블록(display:block)이 되며, 플로트 속성은 지워(clear: both)진다.

[css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁)

홈페이지 레이아웃을 할 때 꼭 알아야 할 속성입니다. <글쓰는 갓디노> 블로그의 메인 페이지도 float: left 속성을 사용하였습니다. float: left에 width는 31%, 나머지는 마진에 퍼센트를 주어 100%로 만

goddino.tistory.com

CSS flexbox 디버깅 (0)	2021.12.07
API Platform, POSTMAN (0)	2021.11.16
HeidiSQL, 데이터베이스 GUI 관리 툴 (0)	2021.11.11
스프링부트에서 JSP 사용하기 (0)	2021.11.09
[이클립스] JAVA EE web.xml 저장시 오래 걸리는 현상 (0)	2021.09.28
[이클립스] enum 멤버 자동 정렬 정지 (0)	2021.09.16
[JAVA] String.format의 %%%ds 의미 (0)	2021.09.14
[C lang] 가위 바위 보 (0)	2021.08.26

suinautant