BFC

块级格式化上下文，不好理解，我们暂且把她理解成“具有特殊的一类元素”

哪些元素会生成BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

代码注释很重要

<html>

<head>

	<title></title>

	<style type="text/css">

		.container {

			/*overflow: hidden;*/

			 /*display:flex ;*/

		height: 27px;

		/*这个做法高度设置之后，虽然可以达到“包裹的目的”，但是不是真正的包裹，要不你就试一试设置height和盒子的height不同值试一试*/

	/**以上达到了高度自适应的目的，包含体元素宽度依然是块元素的宽度，占据一行的宽度*/

		    	 background-color: green;

	/*以下达到了高度自适应的目的，包含体元素宽度却只有包裹盒子的宽度*/

		    	/*float: left;*/

		    	/*position: absolute ;*/

		    	/*position: fixed; */

		    	 /* display:inline-flex;*/

			/* display:table-cell;*/

			/*display:inline-block;*/

 	/*以下达到了高度自适应的目的，包含体元素宽度却只有包裹盒子的宽度，盒子不是水平方向排列，而是垂直方向*/

			/*display:table-caption;*/

		}

		.container div {

			 float: left;

			 background-color: red;

			 margin: 20px;

		}

	</style>

</head>

<body>

<div class="container clearfix">

    <div>Sibling</div>

    <div>Sibling</div>

</div>

</body>

</html>

CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)的更多相关文章

  1. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  2. 【CSS系列】块级元素和行内元素

    块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...

  3. HTML中的行级标签和块级标签 《转换》

    1.html中的块级标签 显示为“块”状,浏览器会在其前后显示折行.常用的块级元素包括: <p>, <ul>,<table>,<h1~h6>等. 2.h ...

  4. CSS中的块级元素与行级元素

    最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行 ...

  5. HTML标签部分（块级/行级）

    一.基本块级标签 1.HTML标签的分类:      a.块级标签:显示为块状,独占一行,自动换行.      b.行级标签:在一行中,从左往右依次排列,不会自动换行. 2.h标签(标题标签) h标签 ...

  6. css ——行级元素与块级元素解析

    一 . 先说说二者的本质区别吧:        行级元素是可以和其他元素处于一行,不用必须另起一行.块级元素是每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 二 .下面 ...

  7. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  8. [数据库事务与锁]详解五: MySQL中的行级锁,表级锁,页级锁

    注明: 本文转载自http://www.hollischuang.com/archives/914 在计算机科学中,锁是在执行多线程时用于强行限制资源访问的同步机制,即用于在并发控制中保证对互斥要求的 ...

  9. 【数据库】数据库的锁机制，MySQL中的行级锁,表级锁,页级锁

    转载:http://www.hollischuang.com/archives/914 数据库的读现象浅析中介绍过,在并发访问情况下,可能会出现脏读.不可重复读和幻读等读现象,为了应对这些问题,主流数 ...

随机推荐

  1. kvm xxx.xml文件的位置

    /var/run/libvirt/qemu/xxx.xml /etc/libvirt/qemu/xxx.xml

  2. tar -cvPf new.tar `rpm -ql vsftpd` 建议不要用绝对路径'/'

    tar -cvPf new.tar `rpm -ql vsftpd` 解压这样的压缩包,会在当前用户的家目录下解压:~./xxxx;加参数-C :tar -xvf xxx.tar -C /  ;来指定 ...

  3. xampp 访问出现New XAMPP security concept

    在浏览器输入 http://60.10.140.22/xampp出现以下错误信息: Access forbidden! New XAMPP security concept: Access to th ...

  4. 以app形式启动chrome——关于chrome命令行

    转自:http://wiselyman.iteye.com/blog/2179043 转自:http://bbs.ithome.com/thread-589651-1-1.html 转自:http:/ ...

  5. loj 1004(dp)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25830‘ 思路:类似与数塔问题,自底向上处理,输入的时候稍微注意一 ...

  6. 建模算法（一）——线性规划

    一.解决问题 主要是安排现有资源(一定),取得最好的效益的问题解决,而且约束条件都是线性的. 二.数学模型 1.一般数学模型 2.MATLAB数学模型 其中c,x都是列向量,A,Aeq是一个合适的矩阵 ...

  7. mvc-4控制器和状态(1)

    导语 将状态保存在客户端可以加快页面反映:但应当避免状态或数据保存在DOM中:在MVC中,状态应该保存在控制器中 控制器是视图和模型的纽带,只有控制器知道视图和模型的存在并将它们连接在一起:当加载页面 ...

  8. StringUtils中 isNotEmpty 和isNotBlank的区别【java字符串判空】

    isNotEmpty(str)等价于 str != null && str.length > 0 isNotBlank(str) 等价于 str != null &&am ...

  9. LMT 装机记录

    老毛桃是一个存在很久的文物了,当年在大学的时候,学习委员还专门做了一个PPT来讲老毛桃,现在想想,有点后悔那是不去试一下. 但万幸的是,最近终于彻底理解了工作流程: 1)安装一个LMT的软件,从其官网 ...

  10. LightOJ1086 Jogging Trails（欧拉回路+中国邮递员问题+SPFA）

    题目求从某点出发回到该点经过所有边至少一次的最短行程. 这个问题我在<图论算法理论.实现及应用>中看过,是一个经典的问题——中国邮递员问题(CPP, chinese postman pro ...