float 해제 방식

https://www.boostcourse.org

다 함께 배우고 성장하는 부스트코스

출처입니다.

<float의 특성>

- 흐름에서 벗어나서 띄워지게 한다.

- 주변 텍스트나 인라인 요소가 주위를 감싼다.

<해제 방법> 

- 부모 요소에 [ height 부여 <나쁨> ->  눈속임 같은 경우입니다. 그냥 크기를 키워주는 건데 내부에 자식이 커지면 거기에 대응하지 못합니다.   

 

 

- 부모요소에 float 속성 포함  <나쁨> -> 부모 요소에 float를 이용하는 것은 다르게 보면 부모도 float이 되어 같은 문제가 부모에게 일어날 수 있습니다.  

 

 

-  부모요소에 overflow : (visible 속성 제외) 사용 <좋음(조건 o)>  -> 쓰게 되면 우리가 원하는 모양이 되어 내부에 자식이 커져도 거기에 대응하게 됨 but 만약 요소 중에 absolute 같은 것을 사용하여 밖에 넘쳐나는 디자인을 할 때 문제가 될 수 있어서 상황에 맞게 사용해야 됩니다.    

 

 

- 뒤에 인접하는 형제 요소에 clear 속성 부여 

<span class="clear"></span>

.clear {
	display : block;
    clear : both;
}

-> block 인 요소에만 사용가능 하기에 block요소로 변경하고

clear를 이용하여 float의 특성을 없애주는 방식인데

clear은 left right both none으로 4가지 속성이 있다 

양쪽을 제거하고 싶을 경우 both 를 이용한다.

 

but 이는 단점이 존재하는데 바로 빈요소를 이용해야 한다는 것이다.

내용의 의미가 없는 요소를 사용하는 것은 시멘틱적으로 만들기 못하기에 문제가 있다...

<좋음(조건 o)>

 

- 가상 요소를 이용한 clear 속성 부여 <제일 좋음>

.box_parent:after { 
	dispalt: block;
    clear: both;
    content: '';
}

->  가상 요소인 :after을 이용하면 위처럼 적용되지만 시멘틱적으로 의미가 없는 빈 태그를 사용하지 않아도 되기 때문에 좋은 사용 방법이며 overflow를 쓰는 것과 clear을 형제 요소에 붙이는 것의 단점을 보완해주는 태그이다.

그렇기에 가장 좋은 방법이라 할 수 있다.

 

마찬가지로 블럭요소로 선언해주고 clear을 이용하고 콘텐츠를 빈 요소로 추가해주면 된다.