2015-05-29 44 views
4

我有以下code,其中ab div块分别在左侧和右侧。为什么我的div与我的代码中的其他div重叠?

<!--HTML--> 
<div style="background-color:#125467" id="a">a</div> 
<div style="background-color:#AABBFF" id="b">b</div> 
<div style="background-color:#990033" id="c">c</div> 
<div style="background-color:#885544" id="d">d</div> 
<div style="background-color:#7799BB" id="e">e</div> 
<div style="background-color:#33FF88" id="f">f</div> 
<div style="background-color:brown" id="g">g</div> 
<div style="background-color:blue" id="h">h</div 

/*CSS*/ 
div { 
    width: 100px; 
    height: 100px; 
    color: white; 
    text-align: center; 
    font-size: 20px; 
} 
* { 
    border: 1px black dashed 
} 

#a { 
    float:left; 
} 

#b { 
    float:right; 
} 

的问题是,我不明白为什么d块重叠c块像下面的图片: C block overlapped by d block

但其它组件通常去。我知道如果我加

#c { 
    clear: both; 
} 

一切都会好的。 enter image description here

但为什么没有clear:both它的行为是这样的?

+0

整个问题是浮动对象不会添加到它们正确驻留的对象的高度。 https://css-tricks.com/the-how-and-why-of-clearing-floats/ – Lain

+0

为什么不添加块d的类? – Alex

回答

4

实际上,d块并不重叠c。 这是一个重叠的块c。

发生这种情况是因为a和b都是float'ed,浏览器看到它们的计算高度为0px,这意味着c,d,e,f都向上移动页面,并且因为a首先出现在DOM中坐在c的顶部。

0

尝试使集装箱

Position:relative; 

和元件或在其内部

Position:absolute; 
3

这是因为float: left属性

默认显示模式是block。因此,divs会在另一个之后排在新的一行。但由于您已将float: left设置为#a。div取自正常流程,忽略#a位置相对于其他元素,因此它重叠。