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. 播放视频最好的 HTML 解决方法

    HTML 5 + <object> + <embed> <video width=" controls="controls"> < ...

  2. 封装自己的ajax函数

    url为具体的url地址, onsuccess为正常返回时的结果, onfail为错误返回时的结果 function MyAjax(url,onsuccess,onfail) { var xhr = ...

  3. SQL的IN, SOME,ANY,IN

    表dbo.Student有12条数据 name 123123123123123123123123123123123123大雄1阿华浩然菊花大姐123123 1.some,any用法一样(不知道有没有其 ...

  4. 如何使用Linux的Crontab定时执行PHP脚本的方法

    我们的PHP程序有时候需要定时执行,我们可以使用ignore_user_abort函数或是在页面放置js让用户帮我们实现.但这两种方法都不太可靠,不稳定.我们可以借助Linux的Crontab工具来稳 ...

  5. Python中通过cx_oracle操作ORACLE数据库的封闭函数

    哈哈,看来我的SQL自动化发布,马上就全面支持ORACLE,MYSQL,POSTGRESQL,MSSQL啦... http://blog.csdn.net/swiftshow/article/deta ...

  6. Java Hour 49 保存和查询历史的Weather

    吾一直坚信,是需求的不断变化推动了架构的不断演变. 新的需求 能够查看指定日期的Weather,因为客户想要比较昨天和今天的天气情况,所以需要能够查询历史数据的功能. 1 能保存当前的天气到数据库 2 ...

  7. 【Android】SlidingMenu属性详解（转）

    原文:http://my.eoe.cn/1169143/archive/21892.html SlidingMenu简介:SlidingMenu的是一种比较新的设置界面或配置界面效果,在主界面左滑或者 ...

  8. codeforces Gym 100187J J. Deck Shuffling dfs

    J. Deck Shuffling Time Limit: 2   Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100187/pro ...

  9. JeeWx 微信管家平台

    .平台简介 Jeewx是一款开源.免费的微信管家系统(多触点管理平台),2014年荣获CSDN开发商大会第一名.采用JAVA语言,支持微信公众号.微信企业号.支付宝服务窗等多触点管理.Jeewx实现了 ...

  10. 系统启动时，spring配置文件解析失败，报”cvc-elt.1: 找不到元素 'beans' 的声明“异常

    现象:spring加载配置文件applicationContext.xml出错,抛出nested exception is og.xml.sax.SAXParseException; lineNumb ...