CSS:清除浮动和BFC

清除浮动

·清除浮动的本质是:清除浮动元素脱离标准流造成的影响,解决高度塌陷和垂直外边距重叠问题
·清除浮动的策略是:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外其他盒子
·为什么要清除浮动:①父级没高度 ②子盒子浮动了 ③影响下面布局了,该清除浮动了

BFC

BFC(Block Formatting Contexts 块格式上下文)是一种独立的渲染环境,它可以使其子元素隔离开来,避免与外部元素的布局冲突。它可以用于清除浮动和实现复杂的布局。当一个元素有BFC属性时,它会在页面上创建一个渲染区域,里面的元素不会影响外部的元素,而外部的元素也不会影响里面的元素,从而达到自我隔离的效果。

BFC和清除浮动的关系

清除浮动的问题可以用BFC解决,也可以用其他方式解决。BFC主要用于约束元素的相互作用以及布局,而清除浮动则是让父元素来支撑子元素的显示。

清除浮动有哪些方式?

清除浮动

1、父级:after伪元素

1
2
3
4
5
6
7
8
9
10
11
//父元素上使用clearfix类
.clearfix:after{
content:"";
display:block;
clear:both;
}

//IE 6、7专有
.clearfix{
*zoom:1
}

2、 父级双伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
//父元素上使用clearfix类
.clearfix:after,.clearfix:before{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}

//IE 6、7专有
.clearfix{
*zoom:1
}

3、父级overflow:hidden

1
2
3
4
//父元素上使用clearfix类
.clearfix{
overflow:hidden;
}

4、额外标签法,使用空div

在需要清除的元素后面加一个使用clear:both类的空的div

1
2
3
div{
clear:both
}

5、使用BFC

BFC是一种布局模型,它可以帮助我们控制元素的位置和尺寸,把元素组织起来,避免其互相影响。下面是一些BFC常用的方法:

display:
·设置浮动float,不包括none
·行内块显示模式/表格单元格,inline-block/table-cell
·弹性布局,flex
position:
·设置定位,absoulte或者fixed
overflow:
·设置overflow值不为visible,为 auto、scroll、hidden


CSS:清除浮动和BFC
https://wwwhisperr.github.io/2023/02/22/page-1/
作者
Whisper
发布于
2023年2月22日
许可协议