解决CSS float 父层定义的颜色无法显示方法

 代码如下 复制代码

<!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 &pound;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;
}

页面呈现的效果如图:

时间: 2024-12-04 07:33:57

解决CSS float 父层定义的颜色无法显示方法的相关文章

css float父元素自适应高度无效解决办法

当几个并列div元素使用float属性时,由于父容器没有定义实际高度(height),在IE中显示出现问题,无法显示父容器的背景颜色或背景图片 做了如下设置实验情况:1. 不正常显示的设置 子容器:使用float 父容器:不定义height 2. 在测试中发现,父容器在不定义高度时,取消float属性,背景颜色显示正常 子容器:不使用float 父容器:不定义height 3. 而给父容器定义了高度后,子容器再使用float则一切正常 子容器:使用float 父容器:定义height 原因及解决

解决css中父div高度不随子div高度变化的方法

问题截图: 造成这种情况的原因是两个子div使用了float浮动属性,解决方法有两种: 1.给复层div加overflow:auto;属性即可,效果截图: 2.新建一个.clear{ clear:both}类,在kid2div下面加入<div class="clear"></div>清除一下浮动即可:

float引起层飘出父层的解决方法_经验交流

1.加clear空div .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;}/* End hide from IE-m

网页制作总结:用CSS使DIV层水平居中

css|网页 一,用CSS使DIV层水平居中 对需要水平居中的DIV层添加以下属性: margin-left: auto;margin-right: auto; 这样在FF中已经居中了,可是在IE中看还是没有居中! 问题并不在CSS而在XHTML网页本身.需要加上这样的代码才能使得上述设置有效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

用CSS让DIV层水平居中

一,用CSS让DIV层水平居中 对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 这样在FF中已经居中了,可是在IE中看还是没有居中! 问题并不在CSS而在XHTML网页本身. 需要加上这样的代码才能使得上述设置有效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

CSS中的层分离编程详解

  随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理. 在我前面的文章中讨论很多关于CSS的问题都可以通过使用一个适当的CSS策略来避免.在这篇文章里,我将着重于讨论使用一种方法或者一个命名规则所带来的好处. 这里有很多可供使用的前端方法和命名规则,每个都有自己的优缺点.在几乎所有的案例中CSS被分割成更易于管理的代码"块".CSS的这种分割方式定义了每一种方法. 命名规则 一个可靠命名规则的重要性是不可忽视的.就像组织结

jQuery实现鼠标滑过Div层背景变颜色的方法

 这篇文章主要介绍了jQuery实现鼠标滑过Div层背景变颜色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="

jQuery实现鼠标滑过Div层背景变颜色的方法_jquery

本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{   height:300px;   width:200px;   background:#ffffff;   border

css float清除浮动实现代码

定义和用法 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 默认值: none 继承性: no 版本: css1 网页特效 语法: object.style.cssfloat="left" 实例 把图像向右浮动: img { float:right; } tiy 浏览器支持 所有主流浏览器都支持 float 属性. 注释:任何的版本的 intern