大家好
小弟目前在学习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>
感谢各位看完><"