CSS 포지셔닝 : clear = float속성 상속해제

clear 

: float 속성이 적용되면 다음요소가 float 속성을 상속 받는데 이걸 해제 시킨다.

 

clear : left 

clear : right 

clear : both (양쪽)

 

 

실습을 통해 알아보자

---

전체 부모요소 width 는 600px이고

 

하늘색과 주황색을 합치고 싶다.

하늘색은 width: 200 주황색은 400 px을 하면 600이 되니까 딱 맞겠지?

 

 

✔ float :left  float : rigth 를 CSS를 해주면 어떻게 될까?

 

보라색 folat : both 는 사라지고 없다

사실 사라진게 아니라 float 는 둥둥떠있는 속성이라

float 속성을 넣어준 하늘색과 주황색 뒤로 가게 된거라 안보이는거다.

 

근데 왜 뒤로간걸까?

이유는 float 속성을 지정하지 않아도 상속을 받기 때문이다.

이걸 해제하기 위해 clear :both라는걸 써야한다.

 

 

 .clear{
      background-color: purple;
      height: 50px;
      clear: both;
    
    }

이렇게 맨마지막 보라색 float: both 에 CSS clear :both ;를 지정하게 해주면

상속된 값이 해제되는걸 알수있다.

---

 

요약 

위에 float 속성이 있는데 밑에 자동으로 상속을 받게 되니까 그걸 해제하기 위해

clear : both 를 쓰게된다는걸 알아두자