CSS part 2 - (1) Float 下

https://mywebproject.tistory.com/191

CSS part 2 - (1) Float 上

지난 시간 학습했던 float를 사용했을 때의 문제점

#1. parent의 height 감소

#2. block 으로 바뀌지만 한줄 차지는 X

 

>>> float 가 일어나면 block 요소들은 무시하지만, inline 요소들은 float를 알아챈다.

float를 피해서 흘러가게 됨 - 따라서 흐름이 망가지고 레이아웃이 난리가 나는 것.

 

 

 

<float 문제 - 해결법>

 

 

 

#1. overflow : hidden

- 쉬운 방법. 

 

float를 하면 parent가 집나간 자식 element를 찾기 못하고 height가 감소하지만,

overflow: hidden을 해주면 자식 element를 찾아서 높이 감소가 없다!

 

하지만 / 왜 이렇게 작동하는지도 모른 채 사용하는 것은 자제해야 할듯.

 

for. 이해

 

MDN Block formatting context 

 

해당 문서를 보면 block formatting context라고 하여 CSS 랜더링 하는 방법에 대한 설명이 나옵니다.

이 BFC는 자신이 포함하고 있는 float 된 요소들을 강제로 자신에게 포함하도록 만든다고 합니다.

BFC가 생성되는 여려 경우 중에 overflow에 visible 값 이외에 값을 넣으면 생성되는 경우가 있습니다.

아마 해당 이유로 overflow:hidden이 동작하는 거 같습니다.

정리하자면 overflow에 visible 이외의 값을 넣어 BFC를 생성하게 되었고 이는 자식 float 요소를 자기에게 포함시키는 결과를 발생시켜 문제를 해결하게 되었다고 볼 수 있을거 같아요!

추가로 overflow는 브라우저에게 overflowing content를 다루기 위해 BFC를 생성하는 것을 당부하고 있습니다.

 

cr: edu.goorm - mention : 김프프님

 

 

#2.  Clearfix

- float 문제점을 해결하는 정석적인 방법.

- CSS의 property중에 'clear'라는 것이 있는데, 그 값을 고정해주는 것.

 

💡CSS clear 속성

- float로 망가진 레이아웃 고치기 위해 만들어진 것. display: block에서만 사용 가능.

- ex> Float: left를 한 블록을 찾을 수 있는  clear: left - float를 찾아서 그에 맞게 자리로 돌아감

- 부모요소도 자신의 height값을 잘 찾을 수 있다. (clear을 해준 블록은 float가 아니므로 자식으로 인식)

- clear는 left / right / both 총 세 개의 값이 존재한다! (both는 left와 right 모두)

 

- html로 div를 설정한 후 clear: left 해주면 해결되지만, 아무런 의미도 없으므로 권장 X.

>> HTML은 건들이지 않고, CSS로만 해결하기 위해 가상 요소(Pseudo-Element)를 이용하자.

- Pseudo Element 에 clear: left를 적용시킴.

 

.parent::after {
	content: "";
	display: block;
	clear: left;
}

부모 요소의 마지막 자식으로 만듬.  parent::after

 

- CSS에서 가상 요소를 사용하는 법

::로 표기함. (예> .class::before )

가상 요소를 사용할 때 반드시 작성해야 하는 property는 content이다.

 

<div class="psuedo">thisisyjin</div>

.pseudo::before {
	content: ' :) Welcome ';
	margin-right: 20px;
	font-style: italic
}

<RESULT>

:) welcome    thisisyjin

 

안에 텍스트가 없으면 content: '' 로 하고

display: inline-block > width, height 설정 또는 background 색 설정 등 다양하게 가능.