HTML父元素里子元素浮动问题
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div {
font-size:20px;
}
#header {
width:700px;
height:30px;
background:#ccc;
margin:0px auto;
}
#main {
width:700px;
margin:0 auto;
background:red;
}
#left {
width:200px;
height:400px;
background:green;
float:left;
}
#right {
width:100px;
height:500px;
background:blue;
float:right;
}
#footer{
width:700px;
height:100px;
margin:0 auto;
background:yellow;
clear:both;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
这是我在学习HTML的时候写的一段代码，这时候父元素背景的红色显示不出来，那个老师说了这么一句话他说：“当父元素没有指定高度时，并且它的子元素有浮动，这个父元素高度不会自动增加！！！”。这句话是什么意思，能解释这个问题吗？背景的红色为什么没显示出来？有高手能给解释一下吗？ 展开
<html>
<head>
<style type="text/css">
div {
font-size:20px;
}
#header {
width:700px;
height:30px;
background:#ccc;
margin:0px auto;
}
#main {
width:700px;
margin:0 auto;
background:red;
}
#left {
width:200px;
height:400px;
background:green;
float:left;
}
#right {
width:100px;
height:500px;
background:blue;
float:right;
}
#footer{
width:700px;
height:100px;
margin:0 auto;
background:yellow;
clear:both;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
这是我在学习HTML的时候写的一段代码，这时候父元素背景的红色显示不出来，那个老师说了这么一句话他说：“当父元素没有指定高度时，并且它的子元素有浮动，这个父元素高度不会自动增加！！！”。这句话是什么意思，能解释这个问题吗？背景的红色为什么没显示出来？有高手能给解释一下吗？ 展开
3个回答
展开全部
我想你用的是火狐吧。这里我就给你说下火狐和IE的区别吧，IE中的DIV高度即使你设成0PX，他的真实高也不会是0PX; 另外他的高度还会随着子元素的高度增加而增加，所以你在IE中是可以看到红色的DIV的。而在火狐中则相反，高度必须的指定，如果你不指定，那么在浮动时，他的高度就是0PX。所以你看不到红色的DIV，另外很多情况下，火狐和IE的效果不是一样的，特别是在用DIV布局的时候，DIV布局要求相当的高，一不注意就会出现放大缩写错位的问题。我通常都采用绝对定位和相对定位来布局，或者用table，希望能帮到你。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
父元素不写高度时候，在用一些切换效果的时候会有浮动效果，很小，firefox不会有浮动效果，不知道为什么，webkit的有
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你需要在main的内部再添加一个子元素用来清除浮动的，可以这样做：
main中插入元素：<div style="clear:both"></div>你也可以把内联样式分离出来，
或者添加一个样式：
#main:after{content:"";display:block;height:0;clear:both;}
IE的话还可以这样：#main{height:1%;}
以上三个方法还不行的话，只能给main设定高度了
main中插入元素：<div style="clear:both"></div>你也可以把内联样式分离出来，
或者添加一个样式：
#main:after{content:"";display:block;height:0;clear:both;}
IE的话还可以这样：#main{height:1%;}
以上三个方法还不行的话，只能给main设定高度了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
