为什么把div里的元素设为浮动，background就没了？也就是div的height不随子级元素增大？
为什么加了ul{float:left;}，div的background就失效了？我想知道原理。谢谢<html><head><styletype="text/css">di...
为什么加了ul{float: left;}，div的background就失效了？我想知道原理。谢谢
<html>
<head>
<style type="text/css">
div{width: 80%;background: blue;}
ul{float: left;}
</style>
</head>
<body>
<div>
<ul><a href="#">首页</a></ul>
<ul><a href="#">DIV+CSS</a>
<li><a href="#">DIV1</a></li>
<li><a href="#">DIV2</a></li>
<li><a href="#">DIV3</a></li>
<li><a href="#">DIV4</a></li>
</ul> 展开
<html>
<head>
<style type="text/css">
div{width: 80%;background: blue;}
ul{float: left;}
</style>
</head>
<body>
<div>
<ul><a href="#">首页</a></ul>
<ul><a href="#">DIV+CSS</a>
<li><a href="#">DIV1</a></li>
<li><a href="#">DIV2</a></li>
<li><a href="#">DIV3</a></li>
<li><a href="#">DIV4</a></li>
</ul> 展开
2个回答
展开全部
因为浮动的子元素会脱离文档流，不再占据父元素的空间，所以就等于父元素没有了高度，背景也就显示不出来了，低版本的ie（高版本的没试过）会自动扩大父元素的高度，但其他浏览器不会，所以如果子元素设成浮动，父元素又没有设置固定高度的情况下，给父元素加个overflow:hidden属性，就可以实现父元素的高度自适应了，像这样 div{width: 80%;background: blue;overflow:hidden;}
追问
给父元素加个overflow:hidden属性，就可以实现父元素的高度自适应了。这个我知道，我想知道是什么原理？
追答
详见另一个问题的回答
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
需要清除浮动，
为容器div增加clearfix类
以下是class类的样式
---------------------------
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
为容器div增加clearfix类
以下是class类的样式
---------------------------
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
更多追问追答
追问
display:table;什么意思？
追答
此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
