[CSS] float 속성 ⭐⭐ / 해제 방법

[CSS] float 속성 ⭐⭐ / 해제 방법

---

✔️ float 속성

: 해당 요소를 자신을 감싸고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하도록 설정한다.

 

📓 속성값

- left : 자신을 감싼 컨테이너 왼쪽에 배치

- right : 자신을 감싼 컨테이너 오른쪽에 배치

- none : 요소를 float 시키지 않음 (기본값)

- inline-start : 해당 요소를 자신을 감싼 컨테이너 시작 쪽에 배치

- inline-end : 해당 요소를 자신을 감싼 컨테이너 시작 끝에 배치

 

👩‍💻 float 해제하는 방법

 - float된 요소의 부모 태그에 강제로 높이 값을 지정(단점 : 반응형시 자동 높이 값 설정 불가)
 - float된 요소의 부모 태그에 overflow:hidden을 적용(단점 : 해당 요소 안의 컨텐츠를 박스 외부로 표현해줄 수 없음)
 - float된 요소의 부모 태그에 overflow:auto를 적용(단점 : 특정 브라우저에서 스크롤 바가 표시)
 - float된 요소의 부모 태그에 float을 또 설정(단점 : 가운데 배치 불가능)
 - float된 요소의 다음에 나오는 태그에 clear:both를 지정(단점 : clear:both가 적용된 요소에는 margin-top 적용 불가)
- float된 요소의 부모 태그에 가상요소를 만들고 해당 요소에 clear:both를 지정

<div class="box left">1</div>
<div class="box left">2</div>
<div class="box left">3</div>
<!-- float:left 속성이 유지되어 이상한 현상이 발생됨 -->
<div style="width: 100px; height: 100px; background: yellow;"></div>

<div style="clear: both;">가장 가까운 앞 요소에 설정된 float:left 또는 float:right 해제</div>

<div class="box right">1</div>
<div class="box right">2</div>
<div class="box right">3</div>
<div style="clear: both;"></div>

💡 <div style="clear: both;">가장 가까운 앞 요소에 설정된 float:left 또는 float:right 해제</div>

 

 

✔️ float 속성 가상요소로 해제하기

: float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정(권장)

/*요 방법이 제일 베스트*/
.clear::after {
	content: '';
	display: block;
	clear: both;
}

<h3>float 해제</h3>

<div class="p-box">
	<div class="box left">A</div>
	<div class="box left">B</div>
</div>

<div class="p-box">
	<div class="box left">C</div>
	<div class="box left">D</div>
</div>
<div style="clear: both;"></div>
<hr>

<p> 부모에 강제로 height 속성을 주면 float 속성이 해제. 반응형시 자동 높이 불가. </p>
<div class="p-box" style="height: 55px;">
	<div class="box left">A</div>
	<div class="box left">B</div>
</div>
<div class="p-box" style="height: 55px;">
	<div class="box left">C</div>
	<div class="box left">D</div>
</div>
<hr>

<p> clear:both;는 margin-top이 적용되지 않는다. </p>
<div class="p-box">
	<div class="box left">A</div>
	<div class="box left">B</div>
</div>

<div class="p-box" style="clear:both; margin-top: 20px;">
	<div class="box left">C</div>
	<div class="box left">D</div>
</div>
<div style="clear: both;"></div>
<hr>

<p> float된 요소의 부모태그에 overflow:hidden으로 float 해제 </p>
<div class="p-box" style="overflow: hidden;">
	<div class="box left">A</div>
	<div class="box left">B</div>
</div>

<div class="p-box" style="overflow: hidden;">
	<div class="box left">C</div>
	<div class="box left">D</div>
</div>
<hr>

<p> float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정(권장) </p>
<div class="p-box clear">
	<div class="box left">A</div>
	<div class="box left">B</div>
</div>

<div class="p-box clear" style="margin-top: 20px;">
	<div class="box left">C</div>
	<div class="box left">D</div>
</div>
<hr>