CSS按钮重叠

Question

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

绿色div（.button1）重叠另一个div（.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>

<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> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

.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：hidden到.message类。

css float属性在web布局中使用很多。这是一个很棒的教程，可以帮助您理解它的所有内容http://css.maxdesign.com.au/floatutorial/

这是关于清除浮动http://www.quirksmode.org/css/clearing.html

的好文章

祝你好运！