Html 为什么我主页上的所有内容都溢出了正文边框？

在我的主页Kendall_Gregory.html上，我的正文边框忽略正文中的内容，并在页面周围设置任意边框。它会忽略页面上的每个图像及其周围的div。同样的代码也适用于其他页面，我不明白为什么这是一个例外

HTML

<div>
    <a href="Html/MenuPage.html">
        <img id="topMenu" src="http://s4.postimg.org/7636jv04p/menu_Top.png">
    </a>
</div>

<img id="headerImage" src="http://s16.postimg.org/uqbzk51yd/Header.png">

<div class ="card">
    <div class="no-hover"> 
        <!-- <span class = "caption"> Fade </span> -->
        <img class="left Fade" src="http://s16.postimg.org/monr28j6t/Fade_Mag.png">
        <!-- hover image -->
    </div>
    <div class="on-hover">
        <a href="Html/Fade.html">
            <img class="left Fade" src="http://s21.postimg.org/o0f1chw13/Xenia_Lally_Hover.png">
        </a>
    </div>
</div>


<!-- GE -->

<div class ="card">
    <div class="no-hover"> 

        <!-- <span class = "caption"> GE </span> -->
        <img class="whiteOverlay right GE" src="http://s16.postimg.org/6vislrw9x/image.png">
    </div>
    <div class="on-hover">
        <a href="Html/GE.html">
            <img class="whiteOverlay right GE" src="http://s21.postimg.org/6yhlwnrs7/GE_hover.png">
        </a>
    </div>
</div>


<!-- Kaleidoscope -->
<div class ="card">
    <div class="no-hover"> 
        <img class="left KALEIDOSCOPE " src="http://s16.postimg.org/5fcc0qzol/KALEIDOSCOPE_Thumb.png">

    </div>
    <div class="on-hover mt100">
        <a href="Html/Pantene.html">
            <img class="left KALEIDOSCOPE" src="http://s16.postimg.org/7q5c7t44l/KALEIDOSCOPE_Thumb_hover.png">
        </a>
    </div>
</div>

<!-- AOHH -->

<div class ="card">
    <div class="no-hover"> 
        <img class="right ArtofHealthyHair" src="http://postimg.org/image/n7subiald/">

    </div>
    <div class="on-hover">
        <a href="Html/AOHH.html">
            <img class=" right ArtofHealthyHair" src="http://s21.postimg.org/u56jpto4n/Artof_Healthy_Hair_Hover.png">
        </a>
    </div>
</div>  

<!-- Nexxus  -->
<div class ="card mt100">
    <div class="no-hover mt100"> 
        <img class=" left Nexxus" src="http://s16.postimg.org/e05nrx9ut/Nexxus.png">

    </div>
    <div class="on-hover mt100">
        <a href="Nexxus.html">
            <img class="left Nexxus" src="http://s21.postimg.org/g00qo0f3b/Nexxus_Hover.png">
        </a>
    </div>
</div>  


<!-- Covergirl -->
<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay right CoverGirl" src="http://s16.postimg.org/lh9ta0t2d/Cover_Girl.png">

    </div>
    <div class="on-hover">
        <a href="Html/CoverGirlByKendallG.html">
            <img class="whiteOverlay right CoverGirl" src="http://s21.postimg.org/6n05jwbc7/Cover_Girl_Hover.png">
        </a>
    </div>
</div>  

<!-- PRTR -->

<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay left PRTR" src="http://s16.postimg.org/ee6zrityd/PRTR.png">
    </div>
    <div class="on-hover">
        <a href="Html/RTR.html">
            <img class="whiteOverlay left PRTR" src="http://s21.postimg.org/edbj2s31j/RTR_Hover.png">
        </a>
    </div>
</div>

<!-- Pantene -->
<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay right Pantnene" src="http://s16.postimg.org/3xqvp6uxx/Pantnene.png">
    </div>
    <div class="on-hover">
        <a href="Html/Pantene.html">
            <img class="whiteOverlay right Pantnene" src="http://s16.postimg.org/wia0c5rmt/WIOL_Hover.png">
        </a>
    </div>
</div>

---

边框未包裹图像元素的原因是图像元素处于浮动状态，而容器尚未清除

每当您浮动图像或任何其他对象时，都可以将其从中取出。这意味着父容器甚至不知道它存在

有几种方法可以解决此问题–称为。在本例中，我使用了

overflow

属性。将

overflow:auto

添加到容器

div

s

.no-hover {overflow: auto;}
.on-hover {overflow: auto;}

我测试了这段代码，它解决了这个问题

请记住，使用

溢出

属性时，可以有不同的值（

自动

，

隐藏

，

滚动

），当内容溢出容器时，每个值都会产生不同的效果。要了解每个值的含义，请参阅本文：

---

希望这有帮助。祝你好运

这个答案被OP接受后，在与第三方用户就我对这个问题所做的各种修改进行的广泛讨论中，被否决了。（OP没有参与讨论。）考虑到这些否决票是在我因帮助OP编辑问题而受到批评的同时发生的，我认为这些否决票与我回答的质量无关。似乎一位版主已经删除了所有的评论。我来这里是为了纠正错误：-）

.no-hover {overflow: auto;}
.on-hover {overflow: auto;}