高度塌陷
2018-12-26 本文已影响0人
心i_af0a
高度塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style type="text/css">
.box1{
border:10px red solid;
/*height: 100px;*/
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
float:left;
}
/*父元素的高度是子元素撑开的*/
.box3{
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">十点差三分</div>
</div>
<div class="box3"></div>
</body>
</html>
这样会造成高度塌陷
解决1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解决高度塌陷1</title>
<style type="text/css">
/*
一个面试题:
BFC
开启之后的特性：
1父元素的处置外边距不会和子元素重叠
2开启BFC元素不会被浮动元素所覆盖
3开启bfc的元素可以包含浮动的子元素
如何开启：
1设置元素浮动 导致父元素的宽度丢失 不推荐
2设置元素的绝对定位
3设置元素为inline-block
4将元素的overflow设置为一个非visivle的值
IE6及一下的浏览器不支持BFC
hasLayout
zoom 设为1 副作用最小
*/
.box1{
border:10px red solid;
/*display: inline-block;*/
overflow: hidden;
zoom：1;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
float:left;
}
/*父元素的高度是子元素撑开的*/
.box3{
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">十点差三分</div>
</div>
<div class="box3"></div>
</body>
</html>
解决2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解决高度塌陷2</title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>
解决3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解决高度塌陷3</title>
<style type="text/css">
.box1{
border:1px solid blue;
}
.clearfix:after{
content:'';
display: block;
clear: both;
}
.clearfix{
zoom:1;
}
.box2{
width: 100px;
height:100px;
background-color: red;
float:left;
}
</style>
</head>
<body>
<dir class="box1 clearfix">
<div class="box2">lalal</div>
</dir>
</body>
</html>
