什么时候需要清除浮动
就是当子元素设置了float属性之后,且父元素的高度和宽度没有进行设置,而是由子元素支撑起来,则会导致父元素的高度塌陷(原本的height后来被置为0)
清除浮动的方式:
1).给父元素添加声明overflow:hidden;
给父元素增加 overflow: hidden; 可以清除浮动的原理:
增加后,父元素会形成一个块级格式化上下文,即BFC,overflow: hidden本意是将父元素中溢出的内容裁切掉,而BFC中,在计算父元素真实高度时候,也把float元素的高度算入其中,所以在计算裁切的同时,顺带达成了清除浮动的目的
BFC的生成
- 根元素
- float的值不为none
- overflow的值不为visible,可用(hidden、auto、scroll)
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
- 弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)
2).在浮动元素下方添加空div,并给该元素添加声明:clear:both;height:0;overflow:hidden;
3):after{content:“.”; display:block; clear:both; height:0; overflow:hidden; visibility:hidden ;}
4).父级div定义height
5).父级div定义zoom