CSS布局基础--BFC
1，什么是BFC
BFC（Block Formatting Context）块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。它是W3C CSS2.1规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且这个区域与外部毫不想干，
2，生成BFC
下面的方法可以创建一个新的BFC
（1）浮动元素，float: left | right
（2）绝对定位元素，position: absolute | fixed
（3）块级元素以及块级容器（比如display: inline-block、table-cell、table-capation）
（4）overflow值不为visible的块级盒子
3，BFC的主要应用
（1）浮动元素的塌陷问题。BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。当一个元素中的子元素浮动了，这个父元素就会发生高度塌陷问题。如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC</title>
<style>
.content {
width: 100%;
border: 2px solid #9acd32;
}
.content1{
width: 100px;
height: 100px;
background: red;
float: left;
margin-left: 20px;
}
.content2{
width: 100px;
height: 100px;
background: green;
float: left;
margin-left: 20px;
}
.content3{
width: 100px;
height: 100px;
background: blue;
float: left;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="content">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
</div>
</body>
</html>
所以照成这种现象的原因就是浮动元素创建了一个新的BFC，成为了一个独立的容器，不会影响到外部的父元素，因此就会照成高度崩塌。知道了原因所在，我们就可以很自然的想到解决这种问题的通常的办法，为父元素设置overflow:hidden，这样父元素就生成一个新的BFC，将浮动的元素包含起来，从而成为一个独立容器。这样外面的元素不再受其浮动的影响，从而达到清除浮动的作用。
.content {
width: 100%;
border: 2px solid #9acd32;
overflow: hidden;
}
（2）边距折叠问题。相邻两个盒子之间的垂直间距是被margin属性决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。照成这种问题的原因就是属于同一个BFC的关系（跟BFC）。只要我们让其不在同一个BFC就可以解决了。
CSS布局基础--BFC的更多相关文章
- CSS布局基础——BFC
what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...
- CSS 布局和 BFC
什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的.W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子 ...
- css布局基础总结
前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...
- CSS布局基础
(初级)css布局 一.单列布局1.基础知识块级元素 div p ul li dl dt 行级元素 img span input strong同一行显示.无换行2.盒子模型盒子模型 (边框border ...
- 分析CSS布局中BFC
1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...
- [CSS布局基础]居中布局的实现方式总结
[原创]码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 做Web开发少不了做页面布局.码路工人给大家总结一下 ...
- CSS布局基础之二认识Viewport
什么是viewport viewport,等同于浏览器窗口. 功能:约束你网站中最顶级包含块(containing block)元素html标签. 什么是包含块(containing block)?下 ...
- CSS布局之BFC和IFC
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6708358.html <这是一篇css2-3的布局规 ...
- CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系
设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...
随机推荐
- 关于foreach的一个BUG
foreach用起来比for更方便,但是foreach隐藏的操作,可能带来更多未知的BUG,今天就遇到一个问题.编程环境VS2010 //使用foreach遍历,其中未改变item的值,但是使用了匿名 ...
- sftp 常用命令 以及 以及与 scp 的比较
1.scp 不能容忍网络闪断,因此一旦出现网络闪断,那么scp 命令就会异常退出 sftp 可以容忍网络闪断,而且具备断电续传,因此sftp 适用于网络更慢的环境, 2. sftp 是一个交互式文件传 ...
- 080 Remove Duplicates from Sorted Array II 从排序阵列中删除重复 II
“删除重复项目” 的进阶:如果重复最多被允许两次,又该怎么办呢?例如:给定排序数列 nums = [1,1,1,2,2,3]你的函数应该返回长度为 5,nums 的前五个元素是 1, 1, 2, 2 ...
- BIO,NIO,AIO总结
熟练掌握 BIO,NIO,AIO 的基本概念以及一些常见问题是你准备面试的过程中不可或缺的一部分,另外这些知识点也是你学习 Netty 的基础. BIO,NIO,AIO 总结 1. BIO (Bloc ...
- python_16(bootstrap)
素材网址: 1.1 官网 https://jquery.com/ 1.2 开源库链接: https://www.bootcdn.cn/ 1.3 网页模板 www.jq22.com 1.1 bootst ...
- Java之构造方法及this、super关键字
有关构造方法的理解: 需要对对象的数据进行初始化,则创建一个构造方法,此方法名字和类名一样,但是没有返回值(类型和具体的值都没,但是可以写return;).构造方法是用来创建对象的,所以是不能被对象调 ...
- 88E1111
千兆网phy芯片 支持GMII,RGMII,MII等接口 具备4个GMII时钟模式 支持自适应功能 超低功耗模式 功率降低模式 MDC/MDIO/TWSI接口 支持10Mb/s,100Mb/s,100 ...
- HDU 4276 The Ghost Blows Light （树形DP，变形）
题意:给定一棵n个节点的树,起点是1,终点是n,每经过一条边需要消耗Ti天,每个点上有一定量的珠宝,要求必须在t天内到达终点才可以将珠宝带出去,问至多能带多少珠宝? 思路: 注意Ti可以为0,而且有可 ...
- LeetCode Isomorphic Strings 对称字符串
题意:如果两个字符串是对称的,就返回true.对称就是将串1中的同一字符都一起换掉,可以换成同串2一样的. 思路:ASCII码表哈希就行了.需要扫3次字符串,共3*n的计算量.复杂度O(n).从串左开 ...
- SAP不同的产品是如何支持用户创建自定义字段的
我们从SAP CRM,Cloud for Customer(简称C4C)和S/4HANA这三个产品分别来看看. SAP CRM 我们使用所谓的Application Enhancement Tool( ...