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的开发者 ...
随机推荐
- 安装Ifconfig
1.ifconfig 2.whereis 检查 3.yum search ifconfig 4.分割线下面让我们安装 net-tools.x86_64 执行 yum -y install net-to ...
- ionic 总结
希望大家都能有了好东西分享出来,单单就ionic来说,我是刚接触,现在用的人不是很多. 我认为如果大家能 有了好的东西或者好的方案 不藏着掖着,分享出来,那么我们的社区会更加活跃,用的人会越来越多,解 ...
- asp.net core 通过 TeamCity 实现持续集成笔记
0x00 很早之前就想体验一把持续集成的快感,然后刚好手头上有个 asp.net core 的项目,就想来部署一下持续集成.一开始我是想用 Jenkins 的,弄了好半天,git 仓库没法同步下来,我 ...
- 2016年12月22日 星期四 --出埃及记 Exodus 21:17
2016年12月22日 星期四 --出埃及记 Exodus 21:17 "Anyone who curses his father or mother must be put to deat ...
- MySQL 常用命令
mysql -uroot -pXXXXXXXXX //登陆mysql mysqladmin -u 用户名 -p 旧密码 password 新密码 创建数据库并分配用户 create database ...
- c++链表归并排序的迭代版本
之前用js写了个归并排序非递归版,而这一次,c++封装链表的时候也遇到了一个归并排序的接口.邓老师实现了递归版本的归并排序,但是递归的调用函数栈的累积是很占内存空间的.于是乎,那试试在链表结构上实现以 ...
- AJAX的问题
1.什么是AJAX AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. A ...
- HDU-4529 郑厂长系列故事——N骑士问题 状态压缩DP
题意:给定一个合法的八皇后棋盘,现在给定1-10个骑士,问这些骑士不能够相互攻击的拜访方式有多少种. 分析:一开始想着搜索写,发现该题和八皇后不同,八皇后每一行只能够摆放一个棋子,因此搜索收敛的很快, ...
- iOS - Library 库
1.动态库 & 静态库 什么是库: 库是程序代码的集合,是共享程序代码的一种方式.根据源代码的公开情况,库可以分为 2 种类型: 开源库: 公开源代码,能看到具体实现. 比如 SDWebIma ...
- Ubuntu中设置静态IP和DNS
在Ubuntu中设置静态IP共两步:1>设置IP:2>设置DNS1>设置IP 编辑 /etc/network/interface文件: sudo vi /etc/n ...