高度塌陷：
当子元素有浮动并且父元素没有设置高度的情况下父元素会出现高度塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background: #2f7688;
/* 不给父元素设置高度，默认高度被子元素撑开 */
}
.box div{
width: 80px;
height: 80px;
border: 3px solid #cc4141;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
给子元素设置浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background: #2f7688;
/* 不给父元素设置高度，默认高度被子元素撑开 */
}
.box div{
width: 80px;
height: 80px;
border: 3px solid #cc4141;
/* float: left;给子元素添加浮动 */
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
解决办法：
-
方法一：给父元素添加声明
overflow:hidden;(触发一个BFC)优点：浏览器支持好，简单；
缺点：当子元素有溢出时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。 -
方法二: 在浮动元素下方添加空div,并给该元素添加声明：
优点：所有浏览器都支持，并且容器溢出不会被裁剪；
缺点：在页面中添加无意义的div，容易造成代码冗余。
div{
clear:both;
height:0;
overflow:hidden;
}
- 方法三: 万能清除浮动法
父元素:after{
content: "";
height: 0;
clear: both;
overflow: hidden;
display: block;
visibility: hidden;
}
优点：不会造成代码冗余，剩余代码性能优化，推荐使用。
- 方法一代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background: #2f7688;
/* 不给父元素设置高度，默认高度被子元素撑开 */
overflow: hidden;/* 方法一 */
}
.box div{
width: 80px;
height: 80px;
border: 3px solid #cc4141;
float: left;/*子元素添加浮动 */
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
父元素高度撑开
- 方法二代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box {
background: #2f7688;
/* 不给父元素设置高度，默认高度被子元素撑开 */
}
.box p {
display: block;
width: 80px;
height: 80px;
border: 3px solid #cc4141;
float: left;/* 给子元素添加浮动*/
}
.box .last{
clear: both;
height: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box clearfix"><!-- 给父元素添加类名clearfix -->
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<div class="last"></div><!-- 添加空元素 -->
</div>
</body>
</html>
- 方法三代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background: #2f7688;
/* 不给父元素设置高度，默认高度被子元素撑开 */
}
.box div {
width: 80px;
height: 80px;
border: 3px solid #cc4141;
float: left;
<!-- 给子元素添加浮动 -->
}
.clearfix:after {
/* 清除浮动 */
content: "";
width: 0;
height: 0;
visibility: hidden;
display: block;
clear: both;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box clearfix"><!-- 给父元素添加类名clearfix -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
▶父元素固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
▶父元素浮动：不推荐，因为父容器浮动会影响到后面的元素。
▶display:inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
