테스트 사이트 - 개발 중인 베타 버전입니다

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에서 해주시기 바랍니다.
글쓰기