CSS按钮的重叠

Question

的URL：http：//edgarferro.squarespace.com/secondtry

绿色DIV（.button1）被overlappig的其他分区（.message，.principle），我想知道如何他们两个都是。

感谢

%%%%%%%%%%%下面是我在HTML编辑器中运行的代码%%%%%%%%%%%%%%

<div class="column"> 
<a href=""><div class="principle"> 
<h2> BIZ</h2> 
</div></a> 
<div class="principle"> 
<h2>< Refresh</h2> 
</div> 
<div class="principle"> 
<h2> Net</h2> 
</div> 
</div> 

<div class="column"> 
<div class="principle"> 
<h2>Process</h2> 
</div> 
<div class="principle"> 
<h2> Graphs</h2> 
</div> 
<div class="principle"> 
<h2> Content</h2> 
</div> 
</div> 

<div class="column"> 
<div class="principle"> 
<h2> Chat</h2> 
</div> 
<div class="principle"> 
<h2>DVD</h2> 
</div> 
<div class="principle"> 
<h2> DB</h2> 
</div> 
</div> 


</div> 
</div> 

<a href=""> 
<div class="button1"> 
World Wide Web 
</div></a> 

@@ @@@@@@@@@@@@@@@@这里是CSS @@@@@@@@@@@@@@@@@@

.message .message_mani { 
float:left; 
width:690px; 
} 
.message .message_mani div.column { 
float:left; 
margin:0 22px 22px 0; 
width:200px; 
} 
.message .message_mani div.column div.principle { 
-moz-background-clip:border; 
-moz-background-inline-policy:continuous; 
-moz-background-origin:padding; 
-moz-border-radius-bottomleft:5px; 
-moz-border-radius-bottomright:5px; 
-moz-border-radius-topleft:5px; 
-moz-border-radius-topright:5px; 
background:#333333 none repeat scroll 0 0; 
display:block; 
float:left; 
margin:0 10px 22px 12px; 
opacity:1; 
width:210px; 
} 
.message .message_mani div.column div.principle h2 { 
-x-system-font:none; 
color:#FFFFFF; 
font-family:georgia,arial,sans-serif; 
font-size:24px; 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:normal; 
line-height:30px; 
padding:10px 15px; 
text-align:center; 
} 
.message .message_mani h1 { 
-x-system-font:none; 
color:#FFFFFF; 
font-family:georgia,arial,sans-serif; 
font-size:36px; 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:normal; 
line-height:42px; 
padding:0 25px 10px 10px; 
text-shadow:1px 1px 1px #444444; 
} 
.message .message_mani h2 { 
-x-system-font:none; 
color:#0DA5BD; 
font-family:georgia,arial,sans-serif; 
font-size:24px; 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:normal; 
line-height:32px; 
margin:10px 0; 
padding:0 25px 10px 10px; 
text-shadow:1px 1px 1px #444444; 
} 
.message .message_mani div.column div.principle:hover { 
-moz-background-clip:border; 
-moz-background-inline-policy:continuous; 
-moz-background-origin:padding; 
background:#0DA5BD none repeat scroll 0 0; 
opacity:1; 
} 
.message .message_mani div.column div.principle h2 { 
-x-system-font:none; 
font-family:georgia,arial,sans-serif; 
font-size:24px; 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:normal; 
line-height:30px; 
padding:20px; 
text-shadow:1px 1px 1px #444444; 
} 


/**color buttons **/ 

.button1, .button2, .button3, .button4, .button5 { 
-moz-border-radius-bottomleft:5px; 
-moz-border-radius-bottomright:5px; 
-moz-border-radius-topleft:5px; 
-moz-border-radius-topright:5px; 
border:1px solid; 
font-family:Tahoma,Geneva,sans-serif; 
font-size:24px; 
margin-bottom:15px; 
padding:10px 5px 10px 10px; 
width:auto; 
} 
.button1 div, .button2 div, .button3 div, .button4 div { 
font-size:14px; 
padding-left:30px; 
width:auto; 
} 
.button1, .button1 a { 
background-color:#999966; 
color:#FFFFFF; 
text-align:center; 
width:auto; 
} 

Answer 1

你需要清除浮动。清除浮动的最简单方法是向包含浮动元素的父元素添加overflow：hidden。因此，添加overflow：隐藏到.message类。

css浮点属性在web布局中使用很多。这里是一个伟大的教程，这将有助于你了解关于它的一切http://css.maxdesign.com.au/floatutorial/

这里是关于清理好的帖子彩车http://www.quirksmode.org/css/clearing.html

祝您好运！