清除修复无法在右侧显示配置文件

Question

我有一个简单的网页，我正在使用clearfix fix，如下所示

.clearfix:after{
content: "";
display: :table;
clear:both;
}

我已创建代码 https://jsfiddle.net/xrcwrn/7b26pwsd/1/我想在下面显示个人资料，但它显示在右侧

Answer 1

您可以尝试用div.clearfix包装所有具有float属性的项目。喜欢这个：

*{
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>