If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. We must add overflow: auto; to the containing element to fix this problem:
HTML file: | Displayed by browser: |
---|---|
<style>
div { border: 3px solid #8AC007; } .img1 { float: right; } .clearfix { overflow: auto; } .img2 { float: right; } </style> <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="../html_beg/images/w3schools.jpg" alt="W3Schools icon" width="104" height="142"> 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="../html_beg/images/w3schools.jpg" alt="W3Schools icon" width="104" height="142"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div> </body> |
In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container: ![]() Add a clearfix class with overflow: auto; to the containing element, to fix this problem: ![]() |