Html CSS不应用某些部分

刚从HTML开始，我想知道为什么。主要部分不适用于底部。此外，唯一适用于.bottom部分的是文本对齐：居中。其他一切似乎都被忽视了

正文{
颜色：#330000；
边框样式：实心；
边框颜色：黑色；
边框宽度：1px；
背景色：#ffffcc；
左边距：-450px；
家庭字体：Verdana；
宽度：900px；
高度：420px；
位置：固定；
左：50%；}
杰克咖啡店{
高度：50px；
边缘底部：0px；
边际上限：0px；
填充顶部：10px；
背景色：#ccaa66；
文本对齐：居中；}
.左半部分{
浮动：左；
宽度：200px；
高度：300px；
左边距：-1px；
背景色：#E8D882；}
.右边{
浮动：对；
宽度：700px；
高度：300px；
右边距：-1px；
背景色：#f1e8b0；}
.主要部分{
边框样式：实心；
边框颜色：黑色；
边框宽度：1px；
背景色：#f1e8b0；}
h4{
左填充：12px；}
h5{
左填充：12px；}
李{
左填充：12px；}
.形象完美{
浮动：对；
右边距：25px；
页边距顶部：75px；}
.底部{
高度：60px；
背景色：#ccaa66
;
文本对齐：居中；
边框样式：实心；
边框颜色：黑色；
边框宽度：1px；}

杰克咖啡店
进来体验一下。。。

特色咖啡和茶
新做的三明治
百吉饼、松饼和有机零食
音乐和诗歌阅读
开放式麦克风之夜


松道23号
诺丁汉，NG1 5YU
0115 9324567
版权所有@2011杰克咖啡馆

它不适用，因为

.bottom part

不是

.main part

的子项。如果要从主要部件继承，则必须嵌套它们：

<h1 class="jake-cofee-shop">Jake's Cofee Shop</h1>

<div class="main-part">
<div class="left-part">
<h4><a href="#">Home</a></h4>
<h4><a href="#">Menu</a></h4>
<h4><a href="#">Music</a></h4>
<h4><a href="#">Jobs</a></h4>
</div>

<div class="right-part">
<h5>Come in and experience...</h5>
<img class="image-perfection" width="250em" src="http://thumbs.xdesktopwallpapers.com/wp-content/uploads/2012/04/White%20Coffe%20Cup%20With%20Beans-720x405.jpg"></img>

<ul>
<li>Specialty Coffee and Tea</li>
<li>Freshly made sandwiches</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open mic nights</li>
<li>...</li>
</ul>

<h5 style="margin-bottom:-20px">23 Pine Road</h5>
<h5 style="margin-bottom:-20px">Nottingham, NG1 5YU</h5>
<h5>0115 9324567</h5>
</div>
<div class="bottom-part">
<h5 style="margin-bottom: 0px">Copyright @2011 Jake's Coffee House</h5>
<a href="http:www.google.com">jake@jcoffee.com</a>
</div>
</div>

杰克咖啡店
进来体验一下。。。

特色咖啡和茶
新做的三明治
百吉饼、松饼和有机零食
音乐和诗歌阅读
开放式麦克风之夜


松道23号
诺丁汉，NG1 5YU
0115 9324567
版权所有@2011杰克咖啡馆

问题在于.main部分仅包含浮动div，浮动div不会强制.main部分的高度将其清除

因此，.main部分div的高度只有2px，而.bottom部分正好位于.main部分（在.top部分下方2px）之后

你可以加上

.main-part:after {
  content:" ";
  display:table;
  clear:both;
}

---

强制.main part div的高度清除浮动div。

请在问题中发布您的代码。外部链接可能会过期，等等。例如，将代码放在JSFIDLE上，您将看到所有样式的.bottom部分都被应用。显然，你没有看到你描述的任何问题。尽管如此，还是去掉了我没有看到的不一致的关闭标签。但无论如何，这也不行。你能告诉我它应该是什么样子吗？这是我注意到的第一件事。我猜你在浏览器中运行它。杰克咖啡店和拥有版权的部分应该是橙色的，周围应该有黑色的边框。中间是黄色的。但是。底部部分不喜欢工作。我现在有了边框，但颜色仍然没有显示出来。@JanLovšin对我说，如果我添加我给你的css，它会显示得很好。看看这本书，或者让我知道你希望有什么不同。哦，是的，它与原来的一本合用。。。猜猜这就是：after的意思。但是如果我将左、右、下三个部分嵌套在main part中呢？我个人认为将页脚保持在main区域之外是一个更好的设计，但是如果您想将页脚放在.main part div中，您只需添加

clear:两者到.css底部部分。这将确保.bottom部分将清除浮动div。