当我使用“对齐”时，为什么我的图像与其他元素重叠？ [复制]

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

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

1. 使用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>

1. 使用 flexbox 或网格（强烈推荐）。在这种情况下，我将使用 flexbox。要实现这样的事情，您应该将您的图像和段落包装到另一个 div 中，然后将 display: flex; 添加到其中，这使他们的孩子遵循 flex 规则。您可以阅读更多关于 flexbox here 和网格 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>