Css 侧边栏在某些页面上正确显示,但在其他页面上未正确显示

Css 侧边栏在某些页面上正确显示,但在其他页面上未正确显示,css,Css,我可以让边栏在某些页面上正确显示,但不是全部页面。我想不出哪里出了错 我在清理浮动方面做得很糟糕,但我不完全理解这是如何工作的,以及如何应用它。因此,索引页面显示正确,但about页面的侧栏位于主页内容下,侧栏应显示的空间为空 article::after, #home-two-parts::after { content:''; display: block; clear: both; } #home-main-left { float: left; widt

我可以让边栏在某些页面上正确显示,但不是全部页面。我想不出哪里出了错

我在清理浮动方面做得很糟糕,但我不完全理解这是如何工作的,以及如何应用它。因此,索引页面显示正确,但about页面的侧栏位于主页内容下,侧栏应显示的空间为空

article::after, #home-two-parts::after {
    content:''; display: block; clear: both;    
}

#home-main-left {
    float: left;
    width: 70%;
    padding: 0 10px 0 10px; 
}


/* === HOMEPAGE - Left Top === */

#intro {
    margin-bottom: 30px;
}

figure {
    margin: 0;
    padding: 0;
}

figure img{
    display: inline-block;
    width: 60%; height: auto;
    padding-right: 20px;
}

figcaption {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}


/* === HOMEPAGE - Left Bottom === */

#home-two-parts {
    margin-bottom: 50px;
}

#home-two-parts p {
    height: 80px;
}

#home-two-parts img {
    width: 80%; 
    height: auto;
}

#about-button, #tutorial-button {
    float: left;
    width: 45%;
}

#about-button {
    margin-right: 30px;
}


/* === ABOUT page ===*/
article::after, #about-extra-two::after {
    clear: both;    
}


#About {
    float: left;
    width: 70%;
    padding: 0 10px 0 10px; 
}


#about-textWrap img {
    float: left;
    margin: 0 1em 1em 0;
    display: inline-block;
    width: 40%; height: auto;
    padding-right: 20px;
}

#about-videos {
    padding-bottom: 20px;
}

.video {
    display: inline-block;
    width: 100%; 
    height: auto;
    text-align: center; 
}

.video-caption {
    text-align: left;
    float: right;
    display: inline-block;
    margin-bottom: 20px;
}

#links {
    width: 100%;
    padding: 0 10px 0 10px;
}

#more, #directory {
    float: left;
    width: 30%;
    height: 250px;
    margin-left: 45px;
    padding: 15px;
    background-color: #f0c1e6;
    overflow: auto;
}


#extra-two {
    margin-bottom: 50px;
}

#extra-two h3 {
    text-align: center;
    color: #ffffff;
    background: #191970;
}


#extra-two p {
height: 80px;
    width: 70%;
}

#extra-two li {
    padding-bottom: 10px;
}

#links {
    float: left;
    width: 70%;
    padding: 0 10px 0 10px;
}

#links ul {
    width: 100%;
    text-align: left;
    margin: 20px;
    padding-bottom: 20px;
}

#links li {
   list-style: circle; 
}

伙计们,谢谢你们的回复,我修好了! 我仔细阅读了发布“最小可复制示例”的指南,并决定回到第一步,检查语法错误,比较可用的页面和不可用的页面

在每个有问题的页面上,有一个元素被错误地定位在主内容部分之外,阻止了我的侧边栏浮动


尽管你们并没有“解决”我的问题,但你们让我停下来思考,回到基础上来,为自己解决问题,这更有价值,因为我觉得我真的学到了一些东西。谢谢大家!^_^

伙计们,谢谢你们的回复,我修好了! 我仔细阅读了发布“最小可复制示例”的指南,并决定回到第一步,检查语法错误,比较可用的页面和不可用的页面

在每个有问题的页面上,有一个元素被错误地定位在主内容部分之外,阻止了我的侧边栏浮动


尽管你们并没有“解决”我的问题,但你们让我停下来思考,回到基础上来,为自己解决问题,这更有价值,因为我觉得我真的学到了一些东西。谢谢大家!^_^

完整的代码请访问堆栈溢出u我们可能需要查看HTML主页和关于页面?您可以减少发布到与
侧栏相关元素的CSS
。\u检查此项以获取有关创建最小可复制示例的更多指南>>>完整代码请访问堆栈溢出u我们可能需要查看HTML主页和关于页面?您可以减少发布到与
侧栏相关元素的CSS
。\u有关创建最小可复制示例的更多指南,请查看此链接>>>