好吧所以这似乎有问题..我尝试了很多东西，但我是一个菜鸟，所以它可能是非常明显的我只是错过它...
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#about {
min-height: 500px;
color: white;
padding: 40px 100px;
}
#about h1, p {
float: left;
}
#about img {
float: right;
}<section id="about">
<div class="container">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet</p>
<img src="https://picsum.photos/250/250">
</div>
</section>只有inline元素围绕floated元素流动，但h1和p标签都是block元素。您可以将它们的两个显示更改为inline-block但是更好的解决方案可能只是将img放在p标签内部与文本本身（因为文本默认情况下具有inline样式并且自然会围绕您的floated图像流动）。
.container {
width: 80%;
margin: auto;
}
#about {
min-height: 500px;
padding: 40px 100px;
}
#about img {
float: right;
}<section id="about">
<div class="container">
<h1>About</h1>
<p><img src="https://picsum.photos/250/250">Lorem ipsum dolor sit amet</p>
</div>
</section>我有同样的问题。我正在使用Bootstrap 4和本地style.css文件。尝试删除float：left;为“#about h1，p”选择器，看看它是否有效。我没有设置“display：inline-block;” h1和p元素的声明，它仍然有效。
这是我的代码：
.about p {
font-size: 25px;
min-width: 300px;
text-align: justify;
text-indent: 15px;
font-weight: bold;
}
.me {
height: 400px;
margin: 0 30px 10px 0;
box-shadow: 2px 5px 10px 0 hsla(240, 100%, 35%, 1);
}
<head>
<!-- link to Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<section class="container bg-primary text-white about" id="about">
<img src="./images/me.JPG" alt="my picture" class="me rounded float-left"/>
<h1 class="font-weight-bold display-4">About Me...</h1>
<p>Hi there! My name is Mohsen, and I'm from Shiraz. I love to learn new things, and though I had just begun to learn about front-end web-development, I'm very
passionate about it.</p>
</section>
</body>