Clearfix is not working showing profile at right - html

Question

I have a simple web page there I am using clearfix fix as below
.clearfix:after{
content: "";
display: :table;
clear:both;
}
I have create code https://jsfiddle.net/xrcwrn/7b26pwsd/1/
I want to show profile below but it is showing at right

Answer 1

You can try to wrap all of the items which have float property with a div.clearfix. Like this:
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family: halvitica ,Arial;
font-size: 18px;
}
.container{
width:1140px;
margin-left: auto;
margin-right: auto;
margin-top:20px;
}
h1,h2{
color:green;
}
h1{
font-size: 40px;
}
h2{
font-size: 35px;
}
p{
text-align: justify
}
.blog-post{
width: 75%;
float: left;
padding-right: 30px;
}
.other-post{
width: 25%;
float:left;
}
.author-box{
padding-top: 20px;
border-top: 1px solid green;
}
.author-box img{
height: 100px;
width: 100px;
border-radius: 50%;
}
.clearfix:after{
content: "";
display: :table;
clear:both;
}
.other {
margin-bottom: 40px;
}
.author-text {
float: left;
margin-left: 25px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="container">
<div class="clearfix">
<div class="blog-post">
<h2>He share of first to worse</h2>
<p>
Conveying or northward offending admitting perfectly my. Colonel gravity get thought fat smiling add but. Wonder twenty hunted and put income set desire expect. Am cottage calling my is mistake cousins talking up. Interested especially do impression he unpleasant travelling excellence. All few our knew time done draw ask.
</p>
</div>
<div class="other-post">
<div class="other">Post 1</div>
<div class="other">Post 2</div>
<div class="other">Post 3</div>
</div>
</div>
<div class="author-box">
<image src="https://randomuser.me/api/portraits/men/68.jpg" alt="author"/>
<p class="author-text">Neeta Rai</p>
</div>
</div>