为什么我使用“ 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

您想将零件图片和段落以及产品包装在单独的div中。添加一些显示块并溢出：hidden;

.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>
<div style="display:block; overflow:hidden">
<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>
</div>

<!--PRODUCTS-->
<br>
<div style="display:block">
    <h1 id="products">OUR PRODUCTS</h1>
</div>

Answer 3

您已将一个div换为要换行的图像和文本，请在下面检查。

.employeeweek{
    width:200px;
    height:200px;
    display:inline-block;
    vertical-align: middle;
}
#products{
        color:green;
        background-color:purple;
        text-align:center;
        }
.text{
  display:inline-block;
  }

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