大家好
小弟目前在學習float
先看問題點QQ
http://imgur.com/LygkXZq
若是在容器裡面使用float
則容器就不會吃到使用float元素的高度
所以page_foot會往上跑
只是為什麼page_foot裡面的內容沒有往上跑呢?
如果說float不會影響在float之後的元素
那照理說page_foot應該不會往上跑才對(背景設為紅色)
以下為css和html的原始碼QQ
css
#main_background {
width:720px;
padding:10px;
border:5px solid black;
background-color:#FFFFCC; /* H */
margin:0 auto; /* WZ0AkZ
}
#page_title {
width:720px;
height:30px;
background-color:#993333; /* ` */
}
#main_menu {
float:left;
width:150px;
height:110px; /* 540-30=510 */
background-color:#663399; /* */
opacity: 0.5
}
#page_content {
float:right;
width:570px; /* 720-150=570 */
height:110px; /* 540-30=510 */
background-color:#66FF99; /* */
opacity: 0.5
}
#page_foot {
width:720px;
height:30px;
background-color:#FF0000;
}
html
<body>
<div id="main_background">
<div id="page_title"></div>
<div id="main_menu"></div>
<div id="page_content"></div>
<div id="page_foot">測試</div>
</div>
</body>
感謝各位看完><"