作者imasaka1117 (Teddy)
看板Web_Design
標題[問題] 關於float
時間Thu Mar 24 15:12:01 2016
大家好
小弟目前在學習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://webptt.com/m.aspx?n=bbs/Web_Design/M.1458803524.A.03C.html
1F：推 imbahunter: 應該要用clear:left? 03/24 15:14
2F：→ NYSM: 浮起來了後面就往前跑了 用clear:both 03/24 16:58
3F：→ imasaka1117: 可是照理說測試應該也會往上跑才對 03/24 17:16
4F：推 heavenbetula: 我也好好奇是什麼原因 03/24 21:51
5F：推 No: 非 float 的文字或 inline element 會「圍繞」float element 03/24 23:17
6F：→ No: 把 footer 的 height 拿掉，接著逐步調小 content 的 width 03/24 23:18
7F：→ No: 就會呈現出它的規則了 03/24 23:19
8F：推 No: 接著可以再把 footer 的 width 也拿掉，加上 overflow: hidden 03/24 23:22
9F：→ No: 將 footer 轉為 block formatting context，會有更多東西可玩 03/24 23:23
11F：→ akccakcctw: 是因為被menu推出來 改一下position就可以了 03/24 23:30
12F：→ akccakcctw: 樓上講得滿清楚的 03/24 23:34