BFC的概念、BFC触发方式、BFC作用介绍
2024-09-03 00:21:06
一、BFC的概念
GFC——block fomatting context(中文译为块级格式化上下文)
二、 如何触发BFC
1. 设置 float 除 none 以外的值(left、right)
2. 设置 overflow 除 visible 以外的值(hidden、scroll、auto)
3. 设置 display 属性(如 table-cell、inline-block、flex)
4. 设置 position 属性(如 absolute、fixed)
三、 BFC的作用
1. 利用BFC解决上下margin重叠问题
多个p元素之间设置上下margin,只能识别其中的一个值,给p元素外层在嵌套一个元素,并设置overflow: hidden; 就为里面的p元素创建一个块级格式化上下文
2. 利用BFC可以解决高度塌陷问题
父元素没有设置高度,子元素float后脱离了正常文档流,不再占据空间,给父元素overflow: hidden; 就给浮动的子元素创建了一个块级格式化上下文,闭合了浮动
3. 利用BFC实现多栏布局
与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖,利用该特性可以作为多栏布局的一种实现方式
最新文章
- 【Java每日一题】20161226
- QImage::drawRect 和 fillRect在处理大面积区域时代价高昂
- Java多线程系列--“基础篇”06之 线程让步
- Exception:A generic error occurred in GDI+
- BZOJ 1648: [Usaco2006 Dec]Cow Picnic 奶牛野餐
- ORA-01034/ORA-27101解决
- Ansible系列(一):基本配置和使用
- (纯代码)快速创建wcf rest 服务
- kubernetes入门(04)kubernetes的核心概念(1)
- 使用 MERGE 语句实现增删改
- Confluence 6 针对 key ";cp_"; 或 ";cps_"; 的 ";Duplicate Entry"; 问题解决
- mongDb安装
- 【C语言】练习2-9
- 使用kubeadm安装Kubernetes v1.10
- linux centos 7.5下 源码编译安装 lua环境
- iOS上架被拒理由及相关解决方案记录
- The Android ION memory allocator
- 能用程序解决的问题绝不BB之租房篇章...
- 测试理论- the conten of test plan
- C++面试笔记--单链表
热门文章
- SpringMvc 支持一下类型Serlvet 原生的 API 作为目标方法的参数
- 【8】ie css hack
- selenium之css selector定位
- 2 Configuring SAP ERP Sales and Distribution -introduction to SAP
- 想使用 MongoDB ,你应该了解这8个方面!
- cocos2dx基础篇(28) 布景层Layer的三个子类
- ";fatal error LNK1169: 找到一个或多个多重定义的符号"; 解决方案
- 【神经网络与深度学习】leveldb的实现原理
- python 并发编程 多线程 守护线程
- Linux mv命令(7)