float : The clearfix Hack(clearfix 해킹)
float : The clearfix Hack(clearfix 해킹)
요소가 포함 된 요소보다 크고 떠 다니면 해당 요소가 컨테이너 외부로 넘칠 것입니다.
그런 다음 overflow: auto;이 요소를 포함하여이 문제를 해결할 수 있습니다.
예
.clearfix {
overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #73AD21;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>
<div><img class="img1" src="w3css.gif" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>
<p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this problem:</p>
<div class="clearfix"><img class="img2" src="w3css.gif" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>
</body>
</html>

게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1067 | CSS | 8년 전 | 1501 | ||
| 1066 | CSS | 8년 전 | 1867 | ||
| 1065 | CSS | 8년 전 | 1462 | ||
| 1064 | CSS | 8년 전 | 1601 | ||
| 1063 | CSS | 8년 전 | 1660 | ||
| 1062 | CSS | 8년 전 | 1677 | ||
| 1061 | CSS | 8년 전 | 1500 | ||
| 1060 | CSS | 8년 전 | 4154 | ||
| 1059 | CSS | 8년 전 | 2085 | ||
| 1058 | CSS | 8년 전 | 2504 | ||
| 1057 | CSS | 8년 전 | 2047 | ||
| 1056 | CSS | 8년 전 | 1972 | ||
| 1055 | CSS | 8년 전 | 1824 | ||
| 1054 | CSS | 8년 전 | 2093 | ||
| 1053 | CSS | 8년 전 | 1883 | ||
| 1052 | CSS | 8년 전 | 2012 | ||
| 1051 | CSS | 8년 전 | 2403 | ||
| 1050 | CSS | 8년 전 | 1732 | ||
| 1049 | CSS | 8년 전 | 2315 | ||
| 1048 | CSS | 8년 전 | 1761 | ||
| 1047 | CSS | 8년 전 | 1557 | ||
| 1046 | CSS | 8년 전 | 1240 | ||
| 1045 | CSS | 8년 전 | 1566 | ||
| 1044 | CSS | 8년 전 | 2321 | ||
| 1043 | CSS | 8년 전 | 2013 | ||
| 1042 | CSS | 8년 전 | 1773 | ||
| 1041 | CSS | 8년 전 | 1728 | ||
| 1040 | CSS | 8년 전 | 1487 | ||
| 1039 | CSS | 8년 전 | 1795 | ||
| 1038 | CSS | 8년 전 | 2234 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기