BFC学习笔记
BFC：块级格式化上下文
占用某一块的空间位置，主要用于清除内部浮动（防止因浮动脱离文档流引起的布局错乱），margin值的嵌套（之前写过一篇关于margin-top嵌套的解决方法），三列布局（占用空间）。
BFC布局规则：（摘自http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html）
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
生成BFC的元素
- 根元素（XML的第一个元素）
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
三列布局使用：
<style type="text/css">
body{
position: relative;
}
.left,.right{
height: 200px;
width: 300px;
background-color: red;
}
.left{
float: left;
}
.right{
float: right;
}
.main{
height: 200px;
background-color: green;
overflow: hidden;
}
</style>
<body>
<div class="left">111</div>
<div class="right">333</div>
<div class="main">222</div>
</body>
main中的代码运用了将main的div BCF化，则独占位置，不会与left，right的浮动重合。
2.清除内部浮动
<style type="text/css">
.border{
width: 300px;
border: 1px solid red;
overflow: hidden;
}
.child{
width: 150px;
height: 150px;
border: 2px solid #ccc;
float: left;
box-sizing:border-box;
}
.aaa{
height: 200px;
width: 200px;
background-color: #eee;
}
</style>
<body>
<div class="border">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="aaa"></div>
</body>
可看出包含两个浮动盒子的div（border）一旦被BFC化，就占用了浮动的位置，因此再来一个div（aaa）不会覆盖浮动。
3.清除margin重叠
<style>
.aaa{
height: 200px;
width: 200px;
background-color: red;
overflow: auto;
}
.bbb{
height: 100px;
width: 100px;
background-color: green;
margin: 30px;
}
<body>
<div class="aaa">
<div class="bbb"></div>
</div>
</body>
尚未BFC化的布局，margin值重叠。
BFC化 margin-top的嵌套问题解决。
BFC学习笔记的更多相关文章
- CSS BFC学习笔记
BFC,全称是Block Formatting Context,块级格式化上下文. 详细是什么,能够理解为页面元素的一种特性.触发了BFC的元素往往会产生一些对刚開始学习的人而言意想不到的效果. 触发 ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- VBA学习笔记
这是一个学习VBA编程的学习笔记. 一. 介绍 二. 使用手册 2.1. 如何在Excel2010中开始使用VBA? 2.2. 如何使用VBA编辑器进行编程? 三. 语法说明 3.1 数据类型 3.2 ...
- 前端html与css学习笔记总结篇(超详细)
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- tensorflow学习笔记——VGGNet
2014年,牛津大学计算机视觉组(Visual Geometry Group)和 Google DeepMind 公司的研究员一起研发了新的深度卷积神经网络:VGGNet ,并取得了ILSVRC201 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- Codeforces Round #374 (div.2)遗憾题合集
C.Journey 读错题目了...不是无向图,结果建错图了(喵第4样例是变成无向就会有环的那种图) 并且这题因为要求路径点尽可能多 其实可以规约为限定路径长的拓扑排序,不一定要用最短路做 #prag ...
- 执行大量的Redis命令，担心效率问题？用Pipelining试试吧~
参考的优秀文章 Request/Response protocols and RTT 来源 原来,系统中一个树结构的数据来源是Redis,由于数据增多.业务复杂,查询速度并不快.究其原因,是单次查询的 ...
- GZFramwork快速开发框架演练之会员系统(三)添加会员等级管理
1.设计会员等级表结构 创建语句: from sysobjects where id = object_id('tb_MembersLevel') and type = 'U') drop table ...
- XAF学习资源整合大全
近期有很多XAF初学者与我联系,我多数时间在重复很多入门问题,所以决定整理一篇XAF资源列表,方便大家查找资料,也请知晓其他资源的人留言或与我联系,我将新资源追加到本篇文章中,方便更多人. 一.本博客 ...
- 解决T400\T500\W500等安装win10驱动后黑屏问题
T400.W500.T500等机型有双显卡的机型,在安装WIn10后会在驱动后黑屏,但可见启动画面: 原因:没有对应的双显卡驱动程序,导致系统无法正确识别显卡: 解决方法:开机按F1进入Bios,在显 ...
- linux之iptables
from http://www.geekfan.net/6921/ Iptables是专为Linux操作系统打造的极其灵活的防火墙工具.对Linux极客玩家和系统管理员来说,iptables非常有用. ...
- [css] CSS相对定位|绝对定位
第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...
- Java Performance - 如何调查解决 CPU 问题
随着硬件的发展,往往服务器会配置足够的 CPUs, Java Server/服务器不太有 CPU 问题:但是偶尔因为 代码海量循环 或者 线程安全性(thread safe), 还是会带来 CPU 问 ...
- 原！！mybatis如何直接 执行传入的任意sql语句 并按照顺序取出查询的结果集
需求: 1.直接执行前端传来的任何sql语句,parameterType="String", 2.对于任何sql语句,其返回值类型无法用resultMap在xml文件里配置或者返回 ...