float高度塌陷问题解决方案
第一种方案 BFC(Block Formatting Context)
块级格式化环境/布局环境
BFC是CSS中的一个隐含属性,开启BFC该元素会变成一个独立的布局区域
元素开启BFC的特点:
1.开启BFC元素不会被浮动元素覆盖
2.开启BFC元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动子元素
开启BFC的方式:
1.设置元素的浮动(不推荐)
2.将元素设置为行内块元素(不推荐)
3.将元素的overflow设置为一个非visible的值(副作用较小)
常用方式为overflow:hidden/auto;
第二种方式:
clear属性作用:消除浮动元素对当前元素所产生的影响。
可选值:left: 消除左侧浮动元素对当前元素的影响
right:消除右侧浮动元素对当前元素的影响
both: 消除两侧中最大影响的那侧
示例
.box1::after {
content:"“;
display:block;
clear:both;
}