为什么我使用 "align" 时我的图像与其他元素重叠？

Question

在我的网站上，我想用一些文字环绕图像，所以我使用了 align="left" 方法。但是当我运行它时，它与它下面的元素重叠。

在我添加之前 align="left":

.employeeweek{
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:200px;
    height:200px;
}
#products{
    color:green;
    background-color:purple;
    text-align:center;
}

<h1 style="text-align:center">EMPLOYEE OF THE WEEK</h1>
<img class="employeeweek" src="http://wewillsellyoucrap.com/employees/Butch%20Montana/butchmontana.jpeg">
<p>A truely amazing employee, Butch Montana was with team AWOL from the beinning.</p>

<!--PRODUCTS-->
<br>
<p>
    <h1 id="products">OUR PRODUCTS</h1>
</p>

之后：

.employeeweek{
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:200px;
    height:200px;
}
#products{
    color:green;
    background-color:purple;
    text-align:center;
}

<h1 style="text-align:center">EMPLOYEE OF THE WEEK</h1>
<img class="employeeweek" src="http://wewillsellyoucrap.com/employees/Butch%20Montana/butchmontana.jpeg" align="left">
<p>A truely amazing employee, Butch Montana was with team AWOL from the beinning.</p>

<!--PRODUCTS-->
<br>
<p>
    <h1 id="products">OUR PRODUCTS</h1>
</p>

如您所见，一旦我添加了 align 属性，图片就会出现在产品栏中。我怎样才能解决这个问题而不把它搞得一团糟？

Answer 1

您不应该在 HTML 中使用 align，因为它在 HTML5.

中是 not supported

请尝试使用 CSS float。

.employeeweek{
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:200px;
    height:200px;
    float: left;
}
#products{
    color:green;
    background-color:purple;
    text-align:center;
    clear: both;
}

<h1 style="text-align:center">EMPLOYEE OF THE WEEK</h1>
<img class="employeeweek" src="http://wewillsellyoucrap.com/employees/Butch%20Montana/butchmontana.jpeg">
<p>A truely amazing employee, Butch Montana was with team AWOL from the beinning.</p>

<!--PRODUCTS-->
<br>
<p>
    <h1 id="products">OUR PRODUCTS</h1>

一旦你想让浮动停止，设置clear很重要。

Answer 2

要实现这一点，您有两种方法：

使用clear: both（完全不推荐）。首先，正如@Torf 所说，由于您正在使用 align（它将转换为浮动），因此您应该指定浮动停靠点的位置。所以你应该简单地在你的浮动元素上添加 clear: both;。

所以你的最终代码应该是这样的：

.employeeweek {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 200px;
  height: 200px;
  float: left;
}

#products {
  color: green;
  background-color: purple;
  text-align: center;
  clear: both;
}

<h1 style="text-align:center">EMPLOYEE OF THE WEEK</h1>
<img class="employeeweek" src="http://wewillsellyoucrap.com/employees/Butch%20Montana/butchmontana.jpeg">
<p>A truely amazing employee, Butch Montana was with team AWOL from the beinning.</p>

<!--PRODUCTS-->
<br>
<p>
  <h1 id="products">OUR PRODUCTS</h1>

使用 flexbox 或网格（强烈推荐）。在这种情况下，我会选择 flexbox。要实现这样的目标，您应该将图像和段落包装到另一个 div 中，然后向其添加 display: flex;，这使得它们的 child 遵循 flex 规则。你可以阅读更多关于 flexbox here and about the grid here.

所以你的最终输出应该是这样的：

.context {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.employeeweek {
  margin: 0 5px;
  display: block;
  width: 200px;
  height: 200px;
}

.context>p {
  margin: 0 5px;
}

#products {
  color: green;
  background-color: purple;
  text-align: center;
}

<h1 style="text-align:center">EMPLOYEE OF THE WEEK</h1>
<div class="context">
  <img class="employeeweek" src="http://wewillsellyoucrap.com/employees/Butch%20Montana/butchmontana.jpeg">
  <p>A truely amazing employee, Butch Montana was with team AWOL from the beinning.</p>
</div>
<!--PRODUCTS-->
<p>
  <h1 id="products">OUR PRODUCTS</h1>
</p>

为什么我使用 "align" 时我的图像与其他元素重叠？

Why is my image overlapping with other elements when I use "align"?

html

css

image

word-wrap