为什么我的“容器” div不包含我的浮动元素？ [英] Why is my "container" div not containing my floated elements?

问题描述

我为我的学校数学中继比赛创建了一个网站。

我有一个容器div（白色背景）

左侧栏和右侧栏都悬浮在容器内。

但是，如果你看下面的图片，你可以看到右边的灰色背景下面显示它。如果Container真正包含顶部，左侧和右侧栏，那么它应该是容器的背景，显示通过和底部应该是一个统一的水平与白色。

$ b $相反，似乎容器不完全包含左侧和右侧。

这是我的CSS：

  #container {
 margin：0 auto; 
 width：750px; 
 background-color：#ffffff; } 
 
＃top-panel {
 background-color：＃000000; 
 text-align：left; 
 width：100％; 
 height：88px; 
 float：left; } 
 
＃left-panel {
 clear：left; 
 text-align：center; 
 background-color：#ffffff; 
 border-right：1px dotted＃000000; 
 float：left; 
 width：250; } 
 
＃right-panel {
 background-color：#ffffff; 
 float：left; 
 width：499; } 
  

链接到页面这里。

如何使容器真正包含divs inside因此灰色背景不会出现在右侧面板下方，并在底部创建不平坦的级别？

解决方案

您的面板会浮动，因此会从正常的页面流出。要使容器封装它们，你必须清除浮动。我的方法是让类清除br：

  .clear {
 clear：both; 
 line-height：0; 
} 
  

这样，它不占用空间，然后将它放在容器div中的两个div下，因为

 < br class =clear/> 
  

应该有效！

I'm creating a website for my schools "Math Relay" competition.

I have a "Container" div (with a white background), then a top-bar, left-bar, and right-bar div inside the container.

left-bar and right-bar are both floated inside "Container".

However, if you look in the image below you can see the right-bar has the grey background showing beneath it. If "Container" is truly containing both top, left and right bar then it should be the containers background which shows through and the bottom should all be at a uniform level with a white color.

Instead, it seems that container isn't fully containing the left & right bar and therefore the actual body background shows through on the bottom of the right bar.

Here is my CSS:

#container {
    margin: 0 auto;
    width: 750px;
    background-color: #ffffff; }

#top-panel {
    background-color: #000000;
    text-align: left;
    width: 100%;
    height: 88px;
    float: left; }

#left-panel {
     clear: left;
     text-align: center;
     background-color: #ffffff;
     border-right: 1px dashed #000000;
     float: left;
     width: 250; }

#right-panel {
    background-color: #ffffff;
    float: left;
    width: 499; }

Link to the page here.

How can I make the "container" truly contain the divs inside it so the grey background will not show up underneath my right-panel and create my uneven level at the bottom?

解决方案

Both of your panels are floated and therefore are taken out of the normal flow of the page. To make the container encapsulate them you have to clear the float. The way I do is is make class clear for br:

.clear {
    clear:both;
    line-height:0;
}

This way it takes up no space and is a clear. Then put it under the two divs in the container div as such

<br class="clear" />

Should work!

这篇关于为什么我的“容器” div不包含我的浮动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！