解决父元素塌陷问题
当给子元素浮动时,浮动元素脱离文档流 空间释放,宽高时内容撑开的
<style>
*{
margin: 0;
padding: 0;
}
.parent{
/* background: #7e4b4b; */
}
.children{
float: left;
}
.c1{
background: salmon;
}
.c2{
background: sandybrown;
}
h2{
height: 50px;
background: rgb(62, 85, 114);
}
</style>
<body>
<div class="parent">
<div class="children c1">111</div>
<div class="children c2">222</div>
</div>
<h2>hahah</h2>
</body>
给子元素浮动后 父元素就没有高度了
当父元素还有兄弟元素时兄弟元素就上去了 占了父元素的位置
解决元素塌陷的方法:
1:给父元素设置固定高度
2:给父元素加overflow:hidden
3:添加伪类选择器
.clearfix::after{
content:"",
display:block,
clear:both
}
.parent::after{
content:'';
display: block;
clear:both
}