BFC理解与运用

最新推荐文章于 2024-09-19 11:25:25 发布

YUJIAN。

最新推荐文章于 2024-09-19 11:25:25 发布

阅读量107

点赞数 1

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/Yu_Jian_Qt/article/details/108256337

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

BFC

布局方案：
常见的布局方案：正常文档流、浮动、绝对定位。

概念：
Block Formatting Contexts (块级格式化上下文)（属于普通文档流布局）。
BFC其实就是一个大盒子，里面的元素不会外部元素的布局，比如：被bfc包裹的元素会自动清除浮动等等。

使用：
只要元素满足下面任一条件即可触发 BFC 特性：
1、body 根元素
2、浮动元素：float 除 none 以外的值
3、绝对定位元素：position (absolute、fixed)
4、display 为 inline-block、table-cells、flex
5、overflow 除了 visible 以外的值 (hidden、auto、scroll)

例子：
1、阻止内部元素被外部元素影响

<div style="width: 250px;">
    <div style="float:left;height:100px;width:100px;background:#f1f1f1;"></div>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>

效果：
在这里插入图片描述
此时想要实现左右布局则需要：

<div style="width: 250px;">
    <div style="float:left;height:100px;width:100px;background:#f1f1f1;"></div>
    <p style="overflow:hidden">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>

效果：
在这里插入图片描述
2、包裹浮动元素/清除浮动

<div style="border:solid 2px #000;">
    <div style="float:left;height:100px;width:100px;background:#f1f1f1;"></div>
</div>

在这里插入图片描述
修改：

<div style="border:solid 2px #000;overflow:hidden">
    <div style="float:left;height:100px;width:100px;background:#f1f1f1;"></div>
</div>

在这里插入图片描述

3、改变margin

<div style="height: 500px;">
    <div style="margin:50px;height:100px;width:100px;background:#f1f1f1;"></div>
    <div style="margin:50px;height:100px;width:100px;background:#f1f1f1;"></div>
</div>

在这里插入图片描述
如图所示，中间的间隔仅有50px，这属于css的一直规范特性，会有外边距重叠。现在需求是要间隔100px.

<div style="height: 500px;">
	<div style="overflow:hidden;">
		<div style="margin:50px;height:100px;width:100px;background:#f1f1f1;"></div>
	</div>
    <div style="overflow:hidden;">
		<div style="margin:50px;height:100px;width:100px;background:#f1f1f1;"></div>
	</div>
</div>

在这里插入图片描述