float 해제방법 5가지

1. height (비추천)

2. overflow:hidden

3. clear: both (형제요소에게.)

4. 가상요소 ( after )

5. 상위요소에 연속적으로 float 주기

 

 

float는 형제 요소들에게 영향을 미침

clear: both를 하면 그 다음 형제요소들은 float 영향을 안받..

.box span::after{content: ""; background-color: orangered; display: block; clear: both;}

이거 같은 경우 다음 형제요소에 비어있는 문서흐름요소를 억지로 집어넣어서 그 전까지를 다 문서흐름에 집어넣는거랑 같은.. 효과...

 

그러니까 clear:both;를 쓰면, 기존까지 float쓰던 걸 묶어서 통째로 문서 흐름에 집어넣는다고 생각하면 됨.