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=像素数量/物 ...
随机推荐
- linux 打开FTP 功能
http://blog.csdn.net/jay285979220/article/details/62216622 今天在linux上安装完了vsftpd后,使用root账号一直无法登陆到服务器上. ...
- js 中对字符串的操作
1.split() split() 方法用于把一个字符串分割成字符串数组. 用法:stringObject.split(separator,howmany) separator:必选,类型为字符串或者 ...
- Struts 2中访问Servlet API的几种方法小结
1.使用ActionContext Action运行期间所用到的数据都保存在ActionContext中,例如session.客户端提交的参数等,ActionContext是Action的一个上下文对 ...
- BS3 多级菜单
<div class="container"> <div class="row"> <h2>Multi level drop ...
- 模拟一次CSRF（跨站请求伪造）例子，适合新手
GET请求伪造 有一个论坛网站,网站有一个可以关注用户的接口,但是必须登录的用户才可以关注其他用户. 这个网站的网站是www.a.com 有一天有一个程序员想提高自己的知名度,决定利用CSRF让大家关 ...
- uvm_globals——告诉这个世界我爱你
uvm_globals.svh 存放全局的变量和方法.当UVM平台启动时,便在uvm_globals查找相应的方法,uvm_globals 的方法实现也比较简单,就是调用uvm_root对应的方法.其 ...
- Linux中yum、rpm、configure使用介绍
安装程序命令介绍 安装包选择策略:能上外网:yum方式.绿色方式->不能上外网:rpm方式.configure方式 1.yum命令yum安装包时,会包所依赖的包也会安装到系统,将源换成163的源 ...
- UVA 10572 Black & White （状压DP）
题意:有一个n*m的矩阵,其中部分格子已经涂黑,部分涂白,要求为其他格子也上黑/白色,问有多少种涂法可以满足一下要求: (1)任意2*2的子矩阵不可以同色. (2)所有格子必须上色. (3)只能有两个 ...
- write命令
write——给用户发信息,以Ctrl+D保存结束 命令所在路径:/usr/bin/write 示例1: # write xiaohua 执行命令后可以输入需要发送的信息,如下: 同时xiaohua收 ...
- 使用ABAP编程实现对微软Office Word文档的操作
SAP ABAP里提供了一个标准的类CL_DOCX_DOCUMENT,提供了本地以".docx"结尾的微软Office word文档的读和写操作. 本文介绍了ABAP类CL_DOC ...