15-BFC
01 BFC官方解释
https://www.w3.org/TR/CSS2/visuren.html#normal-flow
大致意思如下
02 什么情况下会形成BFC
MDN解释
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts
03 BFC的作用
https://www.w3.org/TR/CSS2/visuren.html#normal-flow
大致意思
图解如下
3.1 折叠现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 200px;
background-color: orange;
margin-bottom: 30px;
}
.box2 {
width: 300px;
height: 200px;
margin-top: 50px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
3.2 解决折叠
让它们处在不同的BFC中
效果如下
可以看到根本没有解决折叠的现象
这是因为它们还处在同一个BFC中即html根元素的BFC中
修改代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
overflow: hidden;
}
.box1 {
width: 400px;
height: 200px;
background-color: orange;
margin-bottom: 30px;
overflow: hidden;
}
.box2 {
width: 300px;
height: 200px;
margin-top: 50px;
background-color: brown;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
</html>
这样box1就处于container的BFC中，box2处于html中的BFC
3.3 BFC解决浮动高度塌陷
3.3.1 常用解决方法清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: orange;
}
.box .item {
float: left;
width: 400px;
height: 200px;
border: 1px solid #000;
background-color: brown;
}
.clear-fix::after {
content: "";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="box clear-fix">
<div class="item "></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
![[00029.png]]
3.3.2 BFC解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
overflow: hidden;
background-color: orange;
}
.box .item {
float: left;
width: 400px;
height: 200px;
border: 1px solid #000;
background-color: brown;
}
</style>
</head>
<body>
<div class="box">
<div class="item "></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
![[03-HTML+CSS额外补充知识点/imgs/00029.png]]
官方解释
![[00030.png]]
15-BFC的更多相关文章
- Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容
1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...
- 一天搞定CSS：BFC布局与普通文档流布局比较--15
BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义 它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用 关键词解释: 块级元素:父级( ...
- 什么是BFC？（转载）
在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很 ...
- CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- 前端里神奇的BFC 原理剖析
以前在做自适应两栏布局的时候别人口中听到bfc这个词,于是看了各种关于bfc的文章,发现梦想天空介绍的不错,今天就在他的基础上润色一下. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 B ...
- 【转】前端精选文摘：BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- 15.python的for循环与迭代器、生成器
在前面学习讲完while循环之后,现在终于要将for循环这个坑填上了.之所以拖到现在是因为for循环对前面讲过的序列.字典.集合都是有效的,讲完前面的内容再来讲for循环会更加容易上手. 首先,for ...
- 重新认识Box Model、IFC、BFC和Collapsing margins
尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...
随机推荐
- 从零开始写 Docker(十二)---实现 mydocker stop 停止容器
本文为从零开始写 Docker 系列第十二篇,实现类似 docker stop 的功能,使得我们能够停止指定容器. 完整代码见:https://github.com/lixd/mydocker 欢迎 ...
- 程序员天天 CURD，怎么才能成长，职业发展的思考(2)
接着上一篇:程序员天天 CURD,怎么才能成长,职业发展思考 上一篇写到了用年限来谈程序员的发展,在 4 - 6 年这个时间段需要做的一些事情,接着写这个时间段的. 第 4.5 年时候,你可能会做一些 ...
- 第五章-WAF 绕过
WAF 绕过 1.WAF分类 1.1.软件 WAF 一般被安装到 Web 服务器中直接对其进行防护,能够接触到服务器上的文件,直接检测服务器上是否有不安全的文件和操作等. 常见的软件:安全狗.云盾.云 ...
- 基于三菱Q系列cc-Link的立体仓库控制系统
系统说明: 方案选择: 工艺流程: 触摸屏设计: 程序设计:采用SFC进行编程,结构清晰,逻辑明了 本文章为学习记录,水平有限,望各路大佬们轻喷!!! 转载请注明出处!!!
- WEB服务与NGINX（16）-网站logo之favicon.ico文件
目录 1. 网站logo之favicon.ico文件 1.1 favicon.ico文件的作用 1.2 favicon.ico文件带来的问题 1. 网站logo之favicon.ico文件 1.1 f ...
- 基本base样式
/* 去除常见标签默认的 margin 和 padding */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, input { ma ...
- Windows有自带的远程桌面 为啥还要商业远程桌面
网上有一类观点:最好的远程桌面就是windows自带的远程桌面. 那我们打破砂锅问到底,亲手实践下看看. 首先,我们来到了windows官网-远程桌面介绍页面. 如何使用远程桌面 设置你想要连接以使其 ...
- FFmpeg开发笔记（二十一）Windows环境给FFmpeg集成AVS3解码器
AVS3是中国AVS工作组制定的第三代音视频编解码技术标准,也是全球首个已推出的面向8K及5G产业应用的视频编码标准.AVS工作组于2019年3月9日完成第三代AVS视频标准(AVS3)基准档次的制 ...
- Docker 必知必会4----容器之间的通信
前面几篇文章,我们基本聊了docker的基本概念,以及基本的操作手段: https://www.cnblogs.com/jilodream/p/18177695 初识dockerhttps://w ...
- FMEA学习之PFMEA
一.基础介绍 FMEA 是 Faliure Mode Effect Analysis 简称,翻译过来叫做失效模式分析,按我的理解,用白话说出来就是:对导致不符合生产质量不符合客户要求的问题会产生多么严 ...