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=像素数量/物 ...
随机推荐
- 神奇的VIM
1. di'.di".di`.di( .di{ .dt 'abc' ==> '' di' "abc"==> "" di" `ab ...
- Java-String字符串相关
字符串String: 封装char[] 字符数组,不可变(因为在底层代码中,值用final关键字修饰) 字符串的字面值: 如果第一次用到一个字符串字面值,会在内存中"字符串常量池" ...
- ES-windos环搭建-ik中文分词器
ik下载 打开Github官网,搜索elasticsearch-analysis-ik,单击medcl/elasticsearch-analysis-ik.或者直接点击 在readme.md文件中,下 ...
- nl
-b -b -a 表示不论是否为空行,也同样列出行号 -b -t 如果用空行,空行不要列出行号 -n 列出行号表示方法,主要有3中 -n -n ln 行号显示在屏幕的最左方显示 -n rn 行号显示在 ...
- IOS命名
NS开头的名称不要出现. NS系统名称开头. 命名缩写只用于通用专业术语,如URL,不可自创命名缩写,如Ctr.Msg.命名宁可长一些,也不要难于理解. 是否在看别人代码时各种缩写而不知其所以然?简短 ...
- IOS拉伸之底盖设置
1.选定拉伸 UIImageView *fieldImage=[[UIImageViewalloc]initWithFrame:CGRectMake(37,48+35,240, 32)]; field ...
- PHP识别二维码功能，php-zbarcode 安装
php-zbarcode是PHP识别二维码的扩展. 下面是安装方法,安装前要先安装ImageMagick.zbar. php-zbarcode 下载地址 安装ImageMagick: yum inst ...
- iOS Block的本质（一）
iOS Block的本质(一) 1.对block有一个基本的认识 block本质上也是一个oc对象,他内部也有一个isa指针.block是封装了函数调用以及函数调用环境的OC对象. 2.探寻block ...
- NBUT 1117 Kotiya's Incantation（字符输入处理）
题意: 比较两个串,有三种情况:完全相同,可见字符相同,不同.每个字符串以'-'结尾.难点在输入. 思路: 字符逐个读入,直到'-'为止,读出两串就可以直接进行判断.如果不足两串则结束.输入时需要注意 ...
- Codeforces Round #316 (Div. 2) C Replacement 扫描法
先扫描一遍得到每个位置向后连续的'.'的长度,包含自身,然后在扫一遍求出初始的合并次数. 对于询问,只要对应位置判断一下是不是'.',以及周围的情况. #include<bits/stdc++. ...