作者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/cn.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