1. 오류 부분
2. 원인
부모 요소에 height:auto이거나 높이가 없는경우, 자식 요소의 높이를 인식하지 못하고 감싸지 못해 위의 오류가 발생했다.
3. 해결 방법
[부모요소와 자식요소 모두 다 float를 주는 방법]
<html>
<head>
<style>
div.section01{width: 500px; padding: 10px; background-color: blue;}
div.box{width: 50px; height: 50px;}
</style>
</head>
<body>
<div class="section01" style="float: left;">
<div class="box" style="float: left; background-color:red;">1</div>
<div class="box" style="float: left; background-color:orange;">2</div>
<div class="box" style="float: left; background-color:green;">3</div>
</div>
</body>
</html>
[부모요소에 overflow:hidden을 주는 방법]
<html>
<head>
<style>
div.section01{width: 500px; padding: 10px; background-color: blue;}
div.box{width: 50px; height: 50px;}
</style>
</head>
<body>
<div class="section01" style="overflow: hidden;">
<div class="box" style="float: left; background-color:red;">1</div>
<div class="box" style="float: left; background-color:orange;">2</div>
<div class="box" style="float: left; background-color:green;">3</div>
</div>
</body>
</html>
[after 가상 선택자를 이용하는 방법] ★가장 많이 사용됨★
<html>
<head>
<style>
div.section01{width: 500px; padding: 10px; background-color: blue;}
div.section01:after{content: ""; display: block; clear: both;}
div.box{width: 50px; height: 50px;}
</style>
</head>
<body>
<div class="section01">
<div class="box" style="float: left; background-color:red;">1</div>
<div class="box" style="float: left; background-color:orange;">2</div>
<div class="box" style="float: left; background-color:green;">3</div>
</div>
</body>
</html>
부모class (혹은 id) :after {
content : "";
display : block;
clear : both;
}
가상 선택자를 이용한 방법은 실무에서 가장 많이 사용하는 방법으로
.clearfixed:after{content: ""; display: block; clear: both;} 라고 만들어 두고
필요한 곳에 클래스명 claerfixed를 부모요소에 넣어줘 사용하면 float 인한 오류를 방지할 수 있다.
'개발' 카테고리의 다른 글
| display: table로 너비가 동일한 메뉴버튼 만들기 (0) | 2022.08.18 |
|---|---|
| CSS로 말풍선(tooltip) 만들기 (0) | 2022.08.17 |
| clear 알아보기 (0) | 2022.08.16 |
| 목록을 만드는 태그 (0) | 2022.08.15 |
| float 알아보기 (0) | 2022.08.14 |
댓글