[問題] 關於float
大家好
小弟目前在學習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>
感謝各位看完><"
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.121.146.216
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1458803524.A.03C.html
推
03/24 15:14, , 1F
03/24 15:14, 1F
→
03/24 16:58, , 2F
03/24 16:58, 2F
→
03/24 17:16, , 3F
03/24 17:16, 3F
推
03/24 21:51, , 4F
03/24 21:51, 4F
推
03/24 23:17, , 5F
03/24 23:17, 5F
→
03/24 23:18, , 6F
03/24 23:18, 6F
→
03/24 23:19, , 7F
03/24 23:19, 7F
推
03/24 23:22, , 8F
03/24 23:22, 8F
→
03/24 23:23, , 9F
03/24 23:23, 9F
推
03/24 23:29, , 10F
03/24 23:29, 10F
→
03/24 23:30, , 11F
03/24 23:30, 11F
→
03/24 23:34, , 12F
03/24 23:34, 12F
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
