盒子模型/bfc/ifc

发表于 | 分类于

1.浮动元素会先按照正常流进行布局，然后脱离文档流，并向左或者向右顶到头，这个就是部分流动性
2.如果浮动元素在内联元素或者块状元素前面，内联元素碰到浮动元素会让位，块状元素会忽略浮动元素
3.当为浮动元素创建bfc后，浮动元素会挤开在它后面的元素

区别：

  • 绝对定位与浮动元素：
    1.绝对定位脱离文档流后布局，在没有设置left/top情况下不会覆盖之前的元素，后面的元素会无视它进行布局
    2.浮动元素先按正常流布局，然后脱离文档流向左向右顶到头

浮动元素会破坏自身的高度，由于内部存在文字或者图片这一类的实体

盒子模型

盒子模型

  1. 组成：content Box + padding Box + border Box + margin Box
  2. ie盒子模型和标准盒子模型：
    ie盒子模型：怪异模式 —— width = contentWidth + paddingWidth + borderWidth (height同理)
    标准盒子模型： 标准模式 —— width = contentWidth (height同理)
    box-sizing: (ie8+支持) border-box(使用ie的盒子模型) | content-box (标准的盒子模型)
    -moz-box-sizing: border-box; // FireFox3.5+
    -o-box-sizing: border-box; // Opera9.6(Presto内核)
    -webkit-box-sizing: border-box; // Safari3.2+
    -ms-box-sizing: border-box; // IE8
    box-sizing: border-box; // IE9+,Chrome10.0+,Safari5.1+,Opera10.6

BFC:块级格式化上下文

  • 触发BFC：
  1. float !=none;
  2. overflow != visible;
  3. position != relative | static
  4. display = inline-block | table-cell | table-caption
  5. body根元素
  • BFC规则：
  1. BFC在计算高度的时候，会计算浮动元素的高度
    浮动元素脱离文档流，外部容器无法计算浮动元素的高度
    解决方法：外部容器创建bfc
  2. BFC的区域不会与浮动元素重叠
  3. 每个元素的左边，会与包含它的容器的左边相接触
  4. 属于同一个BFC的两个垂直方向相邻的margin会重叠
    margin重叠概念：同一个BFC中 + 相邻关系的盒子（之间不存在其他元素，内容等） + 垂直方向上的margin会发生重叠
    解决方法：重叠的盒子创建bfc，或者只设置margin-top / marigin-bottom
  5. BFC就是页面中的一个隔离容器，容器中的子元素不会影响到容器外的元素
  6. BFC内部的盒子会在垂直方向上，一个个地放置
    应用：
    自适应两栏布局 （根据2 3）
    消除margin在垂直方向上的重叠 （根据4）
    清除浮动（根据1）
    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

IFC:行级格式化上下文

  • IFC规则
  1. 当某些inline-box的宽度小于line box的最高元素，会按照vertical-align的垂直方式布局
  2. line box的高度取决于内部inline-box的line-height最大高度
  3. 当水平方向上的inline-box不能完全被单个line box所包围的时候，会被分配到多个垂直摆放的line box中，line box也被分为多个盒，如果一个inline-box不允许被切割（white-space：nowrap | pre）那么inline-box将会溢出line box
  4. line box的左边缘紧贴着它的包含块的左边缘，右边缘会紧贴着包含块的右边缘，然后，浮动元素可能会被置于在包含块和line box的边缘之间，从而不同的line box的宽度会有所改变
  5. 当inline-box的总宽度小于包含块的宽度时，以text-align属性水平分布
  6. 有的行盒不包含文本、保留空白、外边距或内边距或边框不为零的行内元素、其他文档流内 In-flow 内容（如图片、行内块或行内表格），并且不以保留的换行符结尾，如果是为决定它们所包含的元素的定位，则必须视其为零高度的行盒，除此之外的其他目的下应视其为不存在

注意点：

  1. out-of-flow：absolute position | float | root element