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. 【python】lamda表达式，map

    一个很好的博客:http://blog.csdn.net/mathboylinlin/article/details/9413551 博客不让转载,我只摘抄了里面几个例子,更多内容到博客里去看 lam ...

  2. Gym 100801A Alex Origami Squares (求正方形边长)

    题目:传送门.(需要下载PDF) 题意:给定一个长方形,在长方形内部画三个相同的正方形,问正方形的边长最大是多大. 题解:根据长宽比例可以算出三种情况,如果长比宽大三倍以上,那么正方形边长就是宽:如果 ...

  3. Java内存访问重排序笔记

    >>关于重排序 重排序通常是编译器或运行时环境为了优化程序性能而采取的对指令进行重新排序执行的一种手段. 重排序分为两类:编译期重排序和运行期重排序,分别对应编译时和运行时环境. > ...

  4. Python语言开发的一些问题

    1.Python是如何进行内存管理的? Python引用了一个内存池(memory pool)机制,即Pymalloc机制(malloc:n.分配内存),用于管理对小块内存的申请和释放内存池(memo ...

  5. 在Android中让Preference的宽度占满整个屏幕的宽度

    今天遇到一个问题,需要修改Preference的宽度,让其与屏幕宽度一致.搞了一上午. 终于发现Preference的这个尺寸是在PreferenceFrameLayout中设置的.通过下面这段代码, ...

  6. device unauthorized & ANDROID_ADB_SERVER_PORT 问题解决

    最近做安卓开发的时候,碰到了如下两个极品问题,刚开始晕头转向,仔细一研究终于解决了: FAQ1: C:\Users\xxx>adb shelladb: Env var ANDROID_ADB_S ...

  7. Oracle数据库表设计时的注意事项

    表是Oracle数据库中最基本的对象之一.万丈高楼从平地起,这个基础对象对于数据库来说,非常重要.因为其设计是否合理,直接跟数据库的性能相关.从Oracle数据库菜鸟到数据库专家这个过程中,在表设计与 ...

  8. CSS优化技巧

    CSS是页面效果呈现中非常重要的组成部分,它包括颜色.大小尺寸.背景和字体等.写CSS很简单很容易,但是要想写出精炼的CSS代码还是有很多技巧的. 下面就是技巧7则: . 合并多个相同属性: 比如很多 ...

  9. poj 2559 单调栈 ***

    给出一系列的1*h的矩形,求矩形的最大面积. 如图: 题解链接:点我 #include <iostream> #include <cstdio> using namespace ...

  10. 【POI xlsx】使用POI对xlsx的单元格样式进行设置 / 使用POI对xlsx的字体进行设置

    涉及到的样式都在代码中有说明: package com.it.poiTest; import java.io.FileNotFoundException; import java.io.FileOut ...