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. 【USACO】namenum

    //开始傻×了 受题目形容的误导 一心想生成所有可能的 字符串组合 之后查找非常慢 //听了同学的 将5000个dict里的字符串 转换成char型数组(不能直接用int 会越界)直接用输入的数据对着 ...

  2. HDU1695 GCD （欧拉函数+容斥原理）

    F - GCD Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  3. July 18th, Week 30th Monday, 2016

    Truth needs no color; beauty, no pencil. 真理不需要色彩,美丽无需涂饰. Most of the time, giving some color to trut ...

  4. Android Session

    AsyncHttpClient保持session http://blog.csdn.net/ewrfedf/article/details/21968511

  5. FileHelper-文件操作辅助类

    using System; using System.Collections.Generic; using System.IO; using System.Text; namespace Whir.S ...

  6. laravel框架中注册信息验证

    .路由配置 <?php Route::. 控制器分配页面及验证表单提交内容 <?php .form 表单验证 {{ Form::open(array().slideUp();   < ...

  7. 在MongoDB中使用JOIN操作

    SQL与NoSQL最大的不同之一就是不支持JOIN,在传统的数据库中,SQL JOIN子句允许你使用普通的字段,在两个或者是更多表中的组合表中的每行数据.例如,如果你有表books和publisher ...

  8. JVM的数据类型

    Java虚拟机是通过某些数据类型来执行计算的,数据类型可以分为两种:基本类型和引用类型,基本类型的变量持有原始值,而引用类型的变量持有引用值. Java语言中的所有基本类型同样也都是Java虚拟机中的 ...

  9. phpStudy启动失败时的解决方法

    phpStudy启动失败时的解决方法 phpStudy启动失败,原因一是防火墙拦截,二是80端口已经被别的程序占用,如IIS,迅雷等:三是没有安装VC9运行库,php和apache都是VC9编译.解决 ...

  10. android环境安装之android4.2安装(转)

    准备学习android,着手安装android时听说很麻烦,在网上看了很多android安装说明,都是android比较早的版本,我这里安装了android4.2,简单记录一下. 安装分为几步,首先申 ...