什么是BFC
块级格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域(如:非BFC元素重叠)。
实际上BFC就是HTML元素的一种文本渲染状态,一个HTML文档中的最大的BFC就是根元素,当一个标签满足某些规则是,其本身就是一个BFC模块,BFC内部的元素不受外部元素的影响,定位和浮动都是在最小的BFC模块内进行的
使用BFC规则
- 内部的box元素都是垂直排布的(行内元素除外)
- 内部的box元素之间会有margin重叠的问题
- BFC模块不会和flaot模块重叠
- BFC内部计算高度的时候会将浮动的元素的高度算到里面,(使用浮动元素将其父元素撑起来)。
- BFC内部为一个独立的整体,与其他的BFC是隔离的,不会影响到外部元素,也不受外部元素的影响。
超出文本部分隐藏
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*超出不换行*/
text-overflow: ellipsis; /*显示为省略号*/
以上这三行代码是加载需要隐藏的文本的最近的一层标签上的,加载其他地方没有效果
解决两个div的margin重叠的问题
- 给其中一个div加上边框
- 在两个div之间增加一个元素(必须有高度的)
- 将其中一个div的display设置为inline-block
实现BFC模块
position设置为absolute或者fixed
display设置为block
float设置为left,right