CSS 子元素浮动，父元素高度塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrapper{
border:1px solid red;
}
.content{
float:left;
width:100px;
height:100px;
background-color:black;
color:#fff;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">1</div>
</div>
</body>
</html>效果：
解决办法
一、使用BFC，消除高度塌陷
1、父元素增加属性 float:left;
2、设置父元素 position:absolute
3、设置父元素 display:inline-block;
使用后效果：
设置完后，父元素将被子元素撑大，但父元素会变成行级元素。
总结：设置了position:absolute，float:left/right 后在内部将元素转换成了inline-block，所以使用BFC后，会将父元素变成行级元素。
二、使用.clearfix，清除浮动影响，不改变父元素。
父元素添加.clearfix样式
.clearfix:before,
.clearfix:after{
content:"";
display:table;
clear:both;
}
父元素被子元素撑开，但父元素依然是块级元素。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
