Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
padding: 8px;
}
.noclearfix {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.img {
float: right;
}
p {
clear: right;
}
</style>
</head>
<body>
<div>
<img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
</div>
<p>Add the new clearfix hack.</p>
<div class="clearfix">
<img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
</div>
</body>
</html>