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的开发者 ...
随机推荐
- JavaScript高级程序设计 读书笔记 第一章
JavaScript是一种专门为与网页交互而设计的脚本语言 JavaScript实现 ECMAscript---核心 DOM---文档对象模型 BOM---浏览器对象模型
- [问题2014S05] 解答
[问题2014S05] 解答 (本解答由谷嵘同学提供) 首先, 由 \(\mathrm{tr}(AB)=\mathrm{tr}(BA)\) 可得 \(a=0\), 或者由 Cauchy-Binet ...
- Bootstrap_标签
一.标签 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户. 那么在Bootstrap框架中特意将这样的效果提 ...
- 凯撒加密（key为3）
基本思想: 加密是把字符串中的每一个字符+3解密是每一个字符-3 源代码: package demo;import java.util.Scanner; class Encryption{ Strin ...
- php多维数组去除空元素
在php中去除数组中的空值可以使用array_filter() 这个函数 但是这个函数只能对一维数组起作用,一旦需要对多维数组去空就不行了,而且去除的空也包括(int)0,(string)0,使用起来 ...
- python_way ,day25 CMDB_models (数据库设计)
from django.db import models from django.contrib.auth.models import User # Create your models here. ...
- XAF学习资源整合大全
近期有很多XAF初学者与我联系,我多数时间在重复很多入门问题,所以决定整理一篇XAF资源列表,方便大家查找资料,也请知晓其他资源的人留言或与我联系,我将新资源追加到本篇文章中,方便更多人. 一.本博客 ...
- jquery总结05-常用事件02-表单事件
表单事件 .focus()元素获得焦点时 阻止冒泡 子元素不可以 .blur() 元素失去焦点时 阻止冒泡 子元素不可以 .change() input.select.textarea值发生改变时 i ...
- 使用Sonatype Nexus搭建Maven私服后如何添加第三方JAR包？
Sonatype Nexus简介 登录Nexus后,点击右侧的“Repositories”,显示当前Nexus所管理的Repository: 默认情况下Nexus为我们创建了以下主要的Reposito ...
- spring profile 多环境配置管理
本地.测试.开发.产品等不同环境文件配置 现象 如果在开发时进行一些数据库测试,希望链接到一个测试的数据库,以避免对开发数据库的影响. 开发时的某些配置比如log4j日志的级别,和生产环境又有 ...