컴퓨터 정보/html.css.js 기초
CSS 포지셔닝 : clear = float속성 상속해제
혜닝혜루
2022. 11. 28. 17:38
728x90
반응형
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 를 쓰게된다는걸 알아두자
728x90