CSS BFC学习笔记
BFC,全称是Block Formatting Context,块级格式化上下文。
具体是什么,可以理解为页面元素的一种特性,触发了BFC的元素往往会产生一些对初学者而言意想不到的效果。
触发BFC的方法有下面几种,满足其中任意一种就能触发BFC:
- 浮动元素(float除了none以外任意值)
- 绝对定位元素(position为absolute或fixed)
- display为inline-block或table-cell或table-caption
- overflow为除了visible以外的其他值(hidden、auto或scroll)
那么BFC有哪些特点呢,为什么要触发BFC呢? 先从几种现象说起吧。
一、外边距合并
有以下结构的html
<div><p>这是一个段落</p>
</div>
<div><p>这是一个段落</p>
</div>
CSS 如下
body{margin: 0;}div{background-color: #2595e5;margin: 10px 0 10px;}p{background-color: #ff9900;margin: 10px 0 10px;}
产生效果:
代码里给div和p都加上了上下边距,但是产生的结果来看好像p标签的上下边距并没有生效,而且在垂直方向上,div的边距只有10px而不是两个10px,这其实是因为他们产生了外边距重叠。
简单地说,外边距合并指的是,在普通文档流中,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
如何避免这种效果的发生呢,这将引出BFC的第一个特性:
阻止和子元素发生外边距折叠
给div加上overflow:hidden属性,即触发BFC的第四个条件:
div{background-color: #2595e5;margin: 10px 0 10px;/*触发BFC*/overflow: hidden;}
再看效果
由此可见,触发了BFC的元素,不和它的子元素发生外边距折叠。
二、高度塌陷
在使用浮动的时候,经常会出现这种情况:
<div class="outer"><div class="inner"></div>
</div>
CSS:
body{margin: 0;}.outer{background-color: #2595e5;border: 1px solid #f00;}.inner{background-color: #ff9900;width: 50px;height: 50px;float: left;}
效果:
可以看到outer的高度是0,并没有算上内部浮动的inner,这种现象称之为高度塌陷。
BFC将能解决这个问题,这就是BFC的第二个特性:
包含浮动元素
同样的给outer加上overflow:
.outer{background-color: #2595e5;border: 1px solid #f00;/*触发BFC*/overflow: hidden;}
产生效果:
三、元素被浮动元素覆盖
这个问题同样出现在有浮动元素的时候:
<div class="left"></div>
<div class="right"></div>
CSS:
body{margin: 0;}.left{width: 50px;height: 50px;background-color: #2595e5;float: left;}.right{background-color: #ff9900;width: 100px;height: 100px;}
产生效果:
可以看到,浮动的元素覆盖在了其相邻元素上,解决这个问题将引出BFC的第三个特性:
阻止元素被浮动元素覆盖
对right添加overflow属性:
.right{background-color: #ff9900;width: 100px;height: 100px;/*触发BFC*/overflow: hidden;}
效果:
这个感觉跟给right也加了float: left一样,因为使用float: left同样会触发BFC(第一个条件)
当然这个情况只出现在两个元素宽度之和不大于父元素宽度的时候,不然right会换行。
总结
总结一下,触发了BFC的元素将具有以下特点:
- 阻止和子元素外边距折叠
- 包含浮动元素
- 阻止元素被浮动元素覆盖
最后需要说明的是IE7以下浏览器中并不支持BFC,而是有其特有的hasLayout,它和BFC很相似,但产生了很多问题。触发hasLayout的方式之一是使用zoom: 1,所以使用的时候最好加上zoom: 1,保证兼容性。
CSS BFC学习笔记相关推荐
- CSS入门学习笔记(案例+详解)
CSS入门学习笔记 一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用 二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法 三.CSS选择器 1.元素 ...
- HTML,CSS,JavaScript学习笔记--导航
陆陆续续花了一个月的时间,把前端三大件HTML,CSS,JavaScript的基本语法学完了,感觉还是收益颇丰的.但是其中的知识远远不止这些,以后学习的过程中在进行补充吧. HTML,CSS学习笔记 ...
- CSS入门学习笔记+案例(1)
CSS入门学习 一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表 是一组样式设置的规则,用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分 ...
- 国庆假 的CSS +JS 学习笔记
1.左右两列定宽,中间自适应, 6. 一个div 中,放三个div ,其中左边和右边是150px,中间div 自适应宽度. left center right .content{ background ...
- CSS(3)学习笔记——持续更新
本篇皆是本人长期记录并整理出来的笔记,如有记录得不对的地方,欢迎探讨.记录的很少,将不断学习不断补充. 1 选择器 CSS(3)中提供的选择器手册(w3school):http://www.w3sch ...
- (1)《Head First HTML与CSS》学习笔记---HTML基本概念
前言: 1. 这本书并没有面面俱到,涵盖所有内容,只提供作为初学者真正需要的东西:基本知识和信心.所以这不是唯一的参考书.(我买了一本<HTML5权威指南>作为参考书和这本一起看, ...
- html、css基础---学习笔记
title: VScode编辑同步Markdown文档到印象笔记 tags: Blog,Elegent notebook: Elegent 超文本标记语言 超文本 : 文本内容 + 非文本内容 所谓H ...
- html,css,js学习笔记(第七天)
01表格.html <!DOCTYPE html> <html> <head><meta charset="UTF-8"><! ...
- css样式学习笔记一
注:其中的内容只是自己学习时的一些笔记,好记性不如烂笔头,在此记录方便以后巩固! 1.Web标准:结构(Html)+表现(样式)+行为(js) 2.样式的选择器: (1)标签(元素选择器)p{ } ( ...
最新文章
- Hibernate 配置 p6spy 显示完整 sql 语句
- 多多客DOODOOKE更新插件模块及下载附件教程
- Rook存储:Kubernetes中最优秀的存储
- 服务器自动安全审计,用于Linux服务器的自动安全审计工具
- 李嘉诚亲自指导:阿尔法狗战何洁
- TF之DD:利用Inception模型+GD算法生成带背景的大尺寸、高质量的Deep Dream图片
- Javascript/Jquery——简单定时器
- 深度学习-Tensorflow2.2-tf.data输入模块{2}-tf.data基础用法-09
- C语言register关键字——最快的关键字
- 【CodeForces - 1066A~E】水题,模拟(有技巧),思维,题意难懂的模拟,二进制问题(有技巧)
- 新颖的自我介绍_公众场合,如何做一个吸睛的自我介绍?
- Linux学习-Jenkins安装
- 本地文件共享到云服务器,Linux系统通过RDP上传文件到Windows云服务器
- 电子地图(gis应用)开发数据来源分析
- MATLAB实现 有限长序列的线性卷积和圆周卷积
- 爬取煎蛋网图片(破解js)
- 2012中国互联网公司、全球互联网公司最新市值排名(2012.12.06)
- [WARNING]:登录失败:密码错误或账号被冻结
- GPU驱动、CUDA和cuDNN之间的版本匹配与下载
- OpenCL Programming Guide - OpenCL 编程指南 - 书中源代码
热门文章
- java计算机毕业设计HTML5企业员工管理系统源码+mysql数据库+系统+lw文档+部署
- 关于学习密码学知识的一些基础知识( trapdoor function)
- 王牌战士服务器维护什么时候好,王牌战士灵敏度最佳的
- 百度SEO 利用百度地图提升网站本地搜索排名
- 计算机网络实验:UDP套接字编程
- how to learning
- 新概念英语第一册——5-8笔记
- windows10 网速慢——提高网络速度
- 浅谈质量方案中的预案
- 论文:Zero-Shot Grounding of Objects from Natural Language Queries