解决塌陷
高度塌陷
- 在
文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style type="text/css">
.box1{
border: purple solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
/*float: left;*/
}
.box3{
/*width: 100px;*/
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
没有设置浮动之前的效果
设置后的效果
- 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
解决
- 根据
W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解决高度塌陷</title>
<style type="text/css">
/*BFC：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启？
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为inline-block
4.将overflow设为一个非visible的值
注：IE六级以下不支持BFC，有haslayout*/
.box1{
border: purple solid;
/*display: inline-block;*/
overflow: hidden;
/*只在IE6中支持*/
zoom: 1;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
/*float: left;*/
}
.box3{
/*width: 100px;*/
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
效果
实战项目
导航条：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
*{
margin: 0px;
padding: 0;
}
.nav{
list-style: none;
background-color: #6495ed;
width: 1000px;
margin: auto;
margin-top: 50px;
/*解决高度塌陷*/
overflow: hidden;
}
.nav li{
float: left;
/*font-family: 新宋体;*/
font-size: 25px;
font-weight: bold;
/*color: white;*/
/*width: 250px;*/
}
.nav a{
display: block;
width: 250px;
/*居中*/
text-align: center;
padding: 5px 0;
/*去除下划线*/
text-decoration: none;
color: white;
}
.nav a:hover{
color: black;
background-color: green;
}
</style>
</head>
<body>
<ul class="nav">
<li><center><a href="http://www.sina.com" target="_blank">新浪</a></center></li>
<li><a href="http://www.baidu.com" target="_blank">百度</a></li>
<li><a href="http://www.360.com" target="_blank">360官网</a></li>
<li><a href="http://www.tencent.com" target="_blank">腾讯</a></li>
</ul>
</body>
</html>
效果
效果
