Float 영역깨짐 방지법
2021. 3. 31. 15:57ㆍTIL/웹표준사이트
728x90
float: left 적용시 (height:0)높이값이 0이 되며 영역이 깨지는 오류가 발생했을 때
- 깨지는 영역에 똑같이 float: left를 사용한다 (X) —> 모든 박스에 float: left를 적용하게 됨
- float의 성질을 차단하는 clear: both 를 사용한다. (X) —> 복잡한 구조일경우 어떤 영역이 깨졌는지 찾기 어려움
- float을 사용한 상위 박스에 overflow: hidden을 사용한다. (O) —> 현재로선 제일 많이 사용됨(웹표준 사이트)
- clearfix를 사용한다. (O) —>반응형 웹사이트 만들 때 사용
'TIL > 웹표준사이트' 카테고리의 다른 글
| Reset.css의 필요성 (0) | 2021.03.31 |
|---|---|
| Html 특수기호 표시 (0) | 2021.03.31 |
| 웹표준을 준수한 이미지 적용 방법 / 대체텍스트 (0) | 2021.03.28 |
| 인라인/블럭 속성 (0) | 2021.03.28 |
| [웹표준사이트] 스킵 메뉴 (0) | 2021.03.24 |