<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif;">
<div class="row">
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>
<div id="top">
<img class="img1" src="https://observation.org/media/photo/46744451.jpg" alt="Pineapple" width="250">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
<button class="btn btn-danger btn-lg">Click</button>
</div>
<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>
<div id="top" class="clearfix">
<img class="img2" src="https://observation.org/media/photo/46744451.jpg" alt="Pineapple" width="250" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet..
<button class="btn btn-danger btn-lg">Click</button>
</div>
</div>
</div>
