父子元素加margin-top值塌陷问题解决方案
1、给父元素加padding值
2、给父元素设置overflow:hidden;
3、把父元素从块元素转换为行内块(不推荐,会改变页面布局)
4、设置浮动(不推荐)
5、设置绝对定位 position: absolute;(不推荐)
6、给父元素添加边框属性
清除浮动方法
1、直接设置父盒子高度
2、额外标签法 给父元素内容的最后添加一个块级元素(不推荐)
3、单伪元素清除法 (不推荐))
4、双伪元素清除法(推荐)
5、给父元素加ouerflow:hidden;(大力推荐
<style>
/* 清除浮动
1、直接设置父盒子高度
2、额外标签法 给父元素内容的最后添加一个块级元素(不推荐)
.clearfix {
clear:both;
}
3、单伪元素清除法 (不推荐))
.clearfix::after {
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
4、双伪元素清除法(推荐)
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear:both;
}
5、给父元素加ouerflow:hidden;(大力推荐)
</style>
*/