Float
- 레이아웃을 구성할 때 블록 요소들을 가로로 배치할 때 사용하는 속성
- 종류 :
left,right,none - float 속성을 사용하게 되면 자동으로
display: block가 된다. - width 값이 선언되지 않은 block 요소에 float 속성이 선언되면, width가 inline 요소와 같이 컨텐츠 길이에 맞게 변하게 된다.
float속성을 사용하면 해당 요소를 다음 요소 위에 붕 뜨게 된다. 이때, 부모요소와 형제요소들은float속성을 통해 공중에 뜬 요소를 찾을 수 없게 된다.
📍 float에 의한 레이아웃 붕괴
-
부모의 모든 자식 요소들에 float 속성을 부여하게 되면 부모요소의 height는 0이 된다.
-
block요소는float요소의 존재를 알 수 없지만,inline요소는float요소의 존재를 인식할 수 있다. 따라서 아래 사진을 보면 block 영역(검정 배경)은 float 요소를 인지하지 못했지만 block 안의 텍스트 컨텐츠는 float 요소의 존재를 인식하여 피해 배치된 것을 볼 수 있다.
📍 float로 붕괴된 레이아웃 해결하는 방법
float속성의 자식요소들을 가진 부모에overflow: hidden적용하기overflow: hidden: 자식 요소가 부모 요소의 영역보다 클 경우에, 넘치는 부분을 안보이게 해주는 역할
Clearfix➡️ 추천!
-clear속성을 부여하여 float 요소를 파악할 수 있도록 하기
- 종류 :clear: left,clear: right,clear: both
➡️ 스타일적 요소이기 때문에 의미없는 div 요소를 생성하는 것이 아닌, css로 가상요소(pseudo-element) 를 생성하여 clear 속성을 지정하는 방식으로 한다.
.parent::after{
content: "";
display: block;
clear: both;
}-> 가상요소에는 content, display:block, clear 속성이 포함되어야한다. (clear 속성은 block 요소에만 활용할 수 있음!!)
📍 관련 실습
1. 탭 메뉴
<li>요소들에float:left속성 적용<ul>요소에 clear 속성을 가진 가상요소 추가
.tab-menu::after{
content: '';
display: block;
clear: left;
}<li>요소 안의<a>태그에 padding 적용
➡️ li 태그에 하는 것보단 a 태그에 주는게 타겟 영역을 넓힐 수 있어서 더 좋다!)<a>태그는inline요소이기 때문에 padding 값을 주려면display:block을 통해 block 요소로 바꿔줘야함 주의!!
.tab-menu-item a {
display: block;
padding: 16px 20px;
}2. 메시지 카드
- 프로필 사진과 글 컨텐츠 박스에
float: left추가하여 가로 배치
.card-user,
.card-content{
float: left;
}- 컨텐츠 박스의 두 번째 문장과 세 번째 문장 사이 간격 주기
➡️<strong>의display속성은 inline이기 때문에margin-bottom을 주기 위해display: block으로 블록 요소로 바꿔줘야한다.
.card-content strong{
display: block;
margin-bottom: 12px;
}- float로 인한 레이아웃 붕괴를 해결하기 위한
clearfix클래스 생성
<div class="card clearfix">
<img src="#" class="card-user" />
<div class="card-content">
<h1>RE: 안녕하세요 배송 관련 문의드립니다</h1>
<strong>customer..</strong>
<p>안녕하세요 승꾸님...</p>
</div>.clearfix::after{
content: '';
display: block;
clear: both;
}참고 사이트
