header块为什么需要写overflow:hidden呢

header块受到谁的浮动影响需设置消除浮动吗？mainbody块的relative定位不会对header有影响，content块的absolute定位也不会有影响额。求解

宝宝心里苦

2016-02-11

源自：网页布局基础 4-6

关注问题我要回答

1002

操作

收起

2 回答

chenjiaobin 回答被采纳 +3 积分
2016-02-13

因为header里面的导航条nav-li设置了浮动，会影响后面布局

0 回复有任何疑惑可以回复我~

收起回答

宝宝心里苦提问者

2016-02-15 回复有任何疑惑可以回复我~

吴小贱o
2016-02-16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>绝对定位实现布局</title>

* {

margin:0;

padding:0;

font-size:12px;

color:#333;

font-family:Verdana, Geneva, sans-serif, "宋体";

list-style:none;

}

a {

text-decoration:none;

}

a:hover {

text-decoration:underline;

color:#ff0000;

}

p {

line-height:24px;

}

#wrap {

width:780px;

margin:0 auto;

padding:0 10px 10px;

border-left:1px solid #e7e7e7;

border-right:1px solid #e7e7e7;

}

#header {

width:100%;

overflow:hidden;

}

.logo {

width:100%;

height:80px;

line-height:80px;

font-size:30px;

font-family:"微软雅黑";

background:#3399cc;

color:#fff;

text-indent:30px;

}

.nav {

width:100%;

margin-top:10px;

}

.nav li {

margin:0 32px;

float:left;

}

.nav li a {

color:#7f7f7f;

font-size:16px;

display:block;

padding-bottom:2px;

}

.nav li a:hover {

border-bottom:3px solid #cc0000;

text-decoration:none;

}

.nav li.current {

border-bottom:3px solid #cc0000;

}

.nav li.current a:hover {

border-bottom:none;

}

#mainbody {

width:100%;

position：relative //参照物

margin-top:20px;

}

#sidebar {

width:180px;

padding-bottom:10px;

}

#sidebar dl {

padding:0 0 5px;

}

#sidebar dt {

font-weight:bold;

line-height:22px;

font-family:"微软雅黑";

font-size:14px;

color:#fff;

background:#3399cc;

padding:5px 0 5px 15px;

font-weight:normal;

margin-bottom:10px;

}

#sidebar dd {

line-height:20px;

padding-left:15px;

}

#sidebar dd.current a {

color:#f00;

}

#content {

position：absolute

margin-left：200px

top:0;

}

#content h1 {

color:#000;

font-size:24px;

font-family:"微软雅黑";

font-weight:normal;

}

#content h3 {

margin-top:10px;

line-height:26px;

}

#content dl {

margin-bottom:10px;

}

#content dt {

font-weight:bold;

line-height:26px;

}

#content dd {

line-height:22px;

}

.learn a {

color:#900b09;

text-decoration:underline;

padding-bottom:2px;

}

.learn a:hover {

text-decoration:none;

}

.tips {

color:#999;

margin-top:20px;

}

.pageto {

border-top:1px solid #aaa;

border-bottom:3px solid #aaa;

margin-top:5px;

padding:15px 0;

}

.pageto a {

margin:0 10px;

background:#f3f3f3;

padding:5px 20px;

border:1px solid #dfdfdf;

color:#555;

}

.pageto a:hover {

color:#000;

text-decoration:none;

}

.disline {

border-bottom:1px dashed #ccc;

margin-top:10px;

}

#footer {

width:100%;

margin-top:15px;

padding:15px 0;

text-align:center;

color:#999;

background:#ddd;

}

</style>

</head>

<body>

<div class="logo">前端开发教程</div>

<ul>

<li><a href="#">JavaScript</a></li>

<li><a href="#">jQuery</a></li>

</ul>

</div>

<dl>

<dd><a href="#">CSS 派生选择器</a></dd>

<dd><a href="#">CSS 属性选择器</a></dd>

</dl>

<dl>

</dl>

<dl>

<dd><a href="#">CSS 盒子模型概述</a></dd>

<dd><a href="#">CSS 外边距合并</a></dd>

</dl>

<dl>

</dl>

<dl>

<dd><a href="#">CSS 元素选择器</a></dd>

<dd><a href="#">CSS 选择器分组</a></dd>

<dd><a href="#">CSS 类选择器详解</a></dd>

<dd><a href="#">CSS ID 选择器详解</a></dd>

<dd><a href="#">CSS 属性选择器详解</a></dd>

<dd><a href="#">CSS 后代选择器</a></dd>

<dd><a href="#">CSS 子元素选择器</a></dd>

<dd><a href="#">CSS 相邻兄弟选择器</a></dd>

</dl>

<dl>

</dl>

</div>

<h3>你应该知道这些知识</h3>

<p>在继续之前，你应该有一个以下基本认识：</p>

<p>· HTML / XHTML</p>

<p class="learn">如果您希望首先学习这些项目，我们的<a href="#">主页</a>上可以找到教程。</p>

<h3>什么是CSS？</h3>

<p>CSS即级联样式表。

它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>

<p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>

<dl>

<dd>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</dd>

</dl>

<dl>

<dd>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</dd>

</dl>

<dl>

<dt>CSS3 计划将 CSS 划分为更小的模块。</dt>

<dd class="learn"><a href="#">亲自体验一下</a>！</dd>

</dl>

<p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>

</div>

</body>

</html>

已经为父级元素mainbody设置了position：relative和子元素content设置了position：absolute，但是没有效果请问这是怎么回事

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

网页布局基础

参与学习 214707 人
解答问题 1756 个

让你精通CSS中三大定位机制，彻底掌握网页布局的相关知识

进入课程

header块为什么需要写overflow:hidden呢

我要回答关注问题

热搜

最近搜索清空

header块为什么需要写overflow:hidden呢

2 回答

header块为什么需要写overflow:hidden呢