박스의 배경 색은 박스의 높이만큼 설정된다. 박스의 높이는 자식의 높이로 설정되어 있다. 부모의 높이를 바꿔도 자식의 높이는 유지된다. 자식이 부모의 영역을 넘어섰다.
overflow의 값에는 auto, hidden, inherit, scroll, visible(기본)이 있다. hidden을 설정하면 부모의 높이만큼만 자식이 보이게 된다. 즉, 자식이 overflow된 자식이 hidden 되는 것이다. scroll 설정을 하면 스크롤이 생겨서 가려진 부분까지 볼 수 있게 된다.
1 2 3 4 5 6 7 8 9 10 11 | <!doctype html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <img class="left" width="20%" src="image/left.jpg"> </div> </body> </html> | cs |
1 2 3 4 5 6 7 8 | body{ background-color:antiquewhite; } .box{ background-color:white; overflow:scroll; height:50px; } | cs |
float
이미지의 오른쪽 부분에 남는 공간이 있는데 그 부분을 활용하려면 float을 써야 한다.
이미지가 왼쪽에 떠있게 하면 아래 문단이 이미지에 붙는다.
1 2 3 4 5 6 7 8 9 | body{ background-color:antiquewhite; } .box{ background-color:white; } .left{ float:left; } | cs |
여기서 p태그의 text가 줄거나 삭제되면 문제가 생긴다. 부모는 float 속성을 가진 자식의 높이를 고려하지 않기 때문에 이미지보다 작아진다.
clear 또는 overflow를 써서 해결한다. overflow:hidden;
float 속성인 자식의 높이는 부모는 알 수 없지만 body는 다르다. 전체 요소들을 제어해야하기 때문에 float인 요소들의 높이도 다 안다. 그러므로 .box도 body처럼 쓰면 된다. overflow를 써서 body와 독립이 되게 한다.
clear
float이 끝나는 지점에서 시작
overflow는 새로운 문서를 시작하는 것이다. overflow가 부여된 요소는 독립적인 문서다. block formatting context
<div>의 자식 <img>가 float:left라면 <div>의 height는 0이다. <div>에 overflow:hidden을 해주면 <img>를 감싼다.
float 요소로부터 독립시키는 방법 - overflow:hidden; 문서가 새로 시작되므로 독립적이다.
'CSS' 카테고리의 다른 글
| CSS 사용법 How to (0) | 2018.10.29 |
|---|---|
| CSS 문법 Syntax (0) | 2018.10.29 |
| 상속 inheritance (0) | 2018.10.07 |
| 버티컬 얼라인 vertical align (0) | 2018.10.07 |
| 마진 병합 margin collapsing (0) | 2018.10.07 |
