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. 【leetcode】clone-graph

    写在前面的话: 看了看自己的博客,从一月底开始就没怎么更新过,我也确实将近5个月没怎么写代码了.今天突然觉得有些心慌,感觉手都已经生疏了.果然,随便找了道题就卡住了.隐约感觉要用map但又不太记得用法 ...

  2. VS禁止特定警告

    项目右键-属性-配置属性-C/C++-高级-禁用特定警告-填写警告编号例如4996

  3. Redis笔记（二）Redis的部署和启动

    Linux下Redis的部署和启动 下载安装介质 Redis官网地址:http://www.redis.io/目前最新版本是redis-3.0.3. 可以访问 http://download.redi ...

  4. Java hour 52 Weather

    采用jetty 后,默认的welcome-file-list 配置失效了,直接跳转到了struts2 的control 中去了. <welcome-file-list> <welco ...

  5. HDU 4343 贪心

    D - Interval queryTime Limit: 1.5 Sec Memory Limit: 256 MB Description This is a very simple questio ...

  6. 电赛菜鸟营培训（五）——OLED屏幕的使用

    一.取模软件的使用 首先进行设置 然后可以生成显示这个字母的代码,列优先,先按列画8行,然后再继续画下一列.汉字为16*16,字母为8*8,对应生成相应个数的ox代码. 二.STM32烤写OLED # ...

  7. sc.WholeTextFiles与sc.textFile区别

    val data1 = sc.wholeTextFiles("/opt/test")val data  = sc.textFile("/opt/test/") ...

  8. 全自动编译FFmpeg(含x264，fdk aac，libmp3lame，libvpx等第3方库)

    需要修改 #存放下载的源代码目录compile_dir=/root/ffmpeg_compile #库文件安装目录prefix_dir=/mnt/third-party 运行方法: source ce ...

  9. SU Demos-03T-F Analysis-02Sutvband

    第一个脚本,生成震源扫描信号,并进行gabor变换 运行结果, 第二个脚本,利用时变滤波从和信号中重建单独的3个扫描信号 运行结果

  10. HTML-Canvas02

    文字对齐方式 : 水平对齐 //是用 textAlign 属性设置水平对齐方式(默认坐标点) ctx.textAlign = "start"; ctx.font = "3 ...