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>