<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav{
background: red;
/*父元素高度塌陷*/
}
#nav a{
float: left;
width: 200px;
height: 30px;
background: green;
color: black;
}
#nav div{
clear: both;
}
#main{
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div id="nav">
<!--div宽度与父元素保持一致，高度由内容决定-->
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<div></div>
<!--添加空的子元素，设置子元素清除浮动-->
</div>
<div id="main">qqqqqqqq</div>
</body>
</html>
<!--
针对父元素高度塌陷
解决方式：
1.直接给父元素固定高度
#nav{
background: red;
/*父元素高度塌陷*/
height: 30px;
}
弊端 父元素中不只含有浮动元素，其高度不能确定
2.为父元素设置浮动
#nav{
background: red;
/*父元素高度塌陷*/
float: left;
}
弊端 影响后面元素的布局（不推荐）
3.给父元素设置overflow为hidden或auto
#nav{
background: red;
/*父元素高度塌陷*/
overflow: hidden;
}
弊端 hidden如果出现内容溢出，会被隐藏不显示
第一种第三种比较常用
4.清除浮动带来的影响（官方推荐）
1.属性 clear
2.解决父元素高度塌陷，解决浮动元素遮挡后面元素
3.取值
none 不作任何处理
left 清除当前元素前面元素左浮动带来的影响
不会被前面左浮动的元素压在下面
right both
-->
针对父元素高度塌陷
解决方式：
1.直接给父元素固定高度
#nav{
background: red;
/*父元素高度塌陷*/
height: 30px;
}
弊端 父元素中不只含有浮动元素，其高度不能确定
2.为父元素设置浮动
#nav{
background: red;
/*父元素高度塌陷*/
float: left;
}
弊端 影响后面元素的布局（不推荐）
3.给父元素设置overflow为hidden或auto
#nav{
background: red;
/*父元素高度塌陷*/
overflow: hidden;
}
弊端 hidden如果出现内容溢出，会被隐藏不显示
第一种第三种比较常用
4.清除浮动带来的影响（官方推荐）
1.属性 clear
2.解决父元素高度塌陷，解决浮动元素遮挡后面元素
3.取值
none 不作任何处理
left 清除当前元素前面元素左浮动带来的影响
不会被前面左浮动的元素压在下面
right both