CSS float 父层定义的颜色无法显示
浏览:1198次 出处信息
不过仔细一看书，原来人家设计的时候已经认识到会遇到这种问题了。同时为了公平起见，让你也看一下，让你也痛苦一下。看来这作者真不是一般的闲。不过话说回来，我喜欢人家这种方式。毕竟只有在问题中，才能学会成长。
What’s happened this time? Notice that the left column is missing the background color;
the fade image set on the body element is showing through. Don’t worry, though, it’s easily
fixed. Besides, we think it’s only fair to take you through the pain that other CSS layout new-
bies have to endure so that you know how to put things right!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fixed Width Layout - Outer container collapsed</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
margin:0;
padding:0;
text-align:center;
background:#f0f0f0 url("body-bg.gif") repeat-x top;
}
#wrapper{
text-align:left;
width:770px;
margin:10px auto;
background:#dade75;
border:1px solid silver;
}
#header{
padding:10px 15px 10px 13px;
background:#272727 url(header-bg.gif) repeat-x bottom left;
}
#content-wrapper{
width:570px;
float:right;
background:#fff url(nav-to-content-trans.gif) repeat-y left;
}
#content-inner{
padding:10px 5px 5px 10px;
}
#navigation{
float:left;
width:200px;
padding-top:15px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="swanky-header-graphic.gif" alt="Swanky header graphic" width="377" height="41" /></div>
<div id="content-wrapper">
<div id="content-inner">
<p>We flew with Czech Airlines and weren't expecting a swish ride; we also weren't expecting to be fed on such a short flight on economy tickets, so we gorged on overpriced breakfast in Stansted airport and didn't know what to do when the flight attendants appeared with trays of pre-packaged food. As usual, greedy guts (me) polished off the sweet items that Manda couldn't quite face so early in the day. </p>
<p>After a smooth flight, we landed under an ominous-looking sky. It was looking dark and moody in the distance, as if to prove that the five days of thunderstorms forecast for Prague were soon to start. Strangely, though, despite the grey skies in the distance it was hot and sunny as we stepped off the plane to the transfer bus. We might just get lucky with the weather, I thought. </p>
<p>Once we got through the usual arrival procedures of claiming baggage, immigration checks etc, we made our way out to where all the transfer buses were waiting for tired travellers. We immediately headed to the right, following a tip from one of Manda's colleagues that there were cheap transfer buses there - a 90 crown fare (approx £2.50) to drop in the centre as opposed to the 490 crown charge for a transfer right to the hotel front door. Luckily, the drop-off point, just around the corner from the Municipal Building, turned out to be an 8-minute walk from our hotel. </p>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="day1.html">Day 1 (arrival)</a></li>
<li><a href="day2.html">Day 2 (kutna Hora)</a></li>
<li><a href="day3.html">Day 3 (Prague Castle)</a></li>
<li><a href="day4.html">Day 4 (up the towers, Karlstejn Castle)</a></li>
<li><a href="day5.html">Day 5 (Metro tour)</a></li>
</ul>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fixed Width Layout - Outer container collapsed</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
margin:0;
padding:0;
text-align:center;
background:#f0f0f0 url("body-bg.gif") repeat-x top;
}
#wrapper{
text-align:left;
width:770px;
margin:10px auto;
background:#dade75;
border:1px solid silver;
}
#header{
padding:10px 15px 10px 13px;
background:#272727 url(header-bg.gif) repeat-x bottom left;
}
#content-wrapper{
width:570px;
float:right;
background:#fff url(nav-to-content-trans.gif) repeat-y left;
}
#content-inner{
padding:10px 5px 5px 10px;
}
#navigation{
float:left;
width:200px;
padding-top:15px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="swanky-header-graphic.gif" alt="Swanky header graphic" width="377" height="41" /></div>
<div id="content-wrapper">
<div id="content-inner">
<p>We flew with Czech Airlines and weren't expecting a swish ride; we also weren't expecting to be fed on such a short flight on economy tickets, so we gorged on overpriced breakfast in Stansted airport and didn't know what to do when the flight attendants appeared with trays of pre-packaged food. As usual, greedy guts (me) polished off the sweet items that Manda couldn't quite face so early in the day. </p>
<p>After a smooth flight, we landed under an ominous-looking sky. It was looking dark and moody in the distance, as if to prove that the five days of thunderstorms forecast for Prague were soon to start. Strangely, though, despite the grey skies in the distance it was hot and sunny as we stepped off the plane to the transfer bus. We might just get lucky with the weather, I thought. </p>
<p>Once we got through the usual arrival procedures of claiming baggage, immigration checks etc, we made our way out to where all the transfer buses were waiting for tired travellers. We immediately headed to the right, following a tip from one of Manda's colleagues that there were cheap transfer buses there - a 90 crown fare (approx £2.50) to drop in the centre as opposed to the 490 crown charge for a transfer right to the hotel front door. Luckily, the drop-off point, just around the corner from the Municipal Building, turned out to be an 8-minute walk from our hotel. </p>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="day1.html">Day 1 (arrival)</a></li>
<li><a href="day2.html">Day 2 (kutna Hora)</a></li>
<li><a href="day3.html">Day 3 (Prague Castle)</a></li>
<li><a href="day4.html">Day 4 (up the towers, Karlstejn Castle)</a></li>
<li><a href="day5.html">Day 5 (Metro tour)</a></li>
</ul>
</div>
</div>
</body>
</html>
页面呈现的效果如图：
在wrapper上定义的颜色dade75不见了。
看书中后面的解释，原来这个也是需要清除浮动。既然如此，那咱就知道了。
#wrapper:after{
content:"";
display:block;
height:0;
clear:both;
}
content:"";
display:block;
height:0;
clear:both;
}
问题顺利解决，看来CSS还是博大精深的。这水也是挺浑的，想要学好还需要很长一段路要走啊。Good Good Study, Day Day Up~
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：CSS 简易浮动清除方法讨论
后一篇：HTML优化 >>
文章信息
- 作者：simaopig 来源： 小小子，simaopig
- 标签： float 父层
- 发布时间：2010-06-28 23:56:56
近3天十大热文
-
[309] Go Reflect 性能 -
[14] [译]Google Chrome中的高性能网
-
[10] 精于图片处理的10款jQuery插件
-
[10] 在FreeNAS/BSD搭建基于Nginx+
-
[10] Mac下.apk的反编译
-
[10] webapp网页调试工具Chrome Dev
-
[9] jQuery性能优化指南
-
[9] 程序中的“多线程”
-
[9] rsync同步的艺术
-
[8] 内存表在同步环境注意事项
