关于css排版的一些属性

浮动

1.往那边浮动，元素就会尽可能的往那边靠和往上靠

清除浮动

1.clear  清除浮动对元素的影响，写在被影响元素上
  left  清除左浮动的影响 
  right 清除右浮动的影响
  both  清除两边浮动的影响
  none  不清除

定位position

    1、absolute 绝对定位
      a.子元素定位的时候是按照第一个定过位的父级元素来定位，没有定过位的父级元素就按照body定位
      b.绝对定位，不考虑浏览器默认的margin和padding值
    2、relative 相对定位
      a.相对自己原来的位置定位。
    3、fixed 固定
      a.相对窗口定位位置，不受父级元素定位和窗口滚动条的影响。

备注：相对定位原来的位置会被保留，绝对位置定位原来的位置会被清固定定位原来的位置会被清空。

overflow

1.hidden 隐藏但不会裁剪
2.auto   如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
3.scroll 内容被修剪，但是浏览器会生成滚动条以便查看
4.visible 默认值，内容不会被修剪，会呈现在元素框之外

clip

上 左  正常裁剪，裁了多少显示剩下的。 
右 下  裁多少，显示多少。

vertical-align

垂直对齐

z-index

1.更改元素层叠位置
2.z-index 值越大，更接近顶部

display

值 none = 隐藏元素，元素位置被清空
visiblily 值 hidden  隐藏元素，元素位置被保留

block formatting context（简称bfc） 块级格式化上下文（环境）

bfc中布局规则

1.在bfc环境里面所有元素都会按照垂直方向排放（默认）。
2.相邻盒子（box）在垂直方向上的margin值会重叠
3.内部盒子会与bfc的（左边/右边）线接触。浮动也是这样。
4.bfc区域不会与浮动盒子重叠。
5.bfc环境中的子元素与外界分离，不会影响到外面的元素，而外面的元素也不会影响到bfc里面的元素。
6.bfc中浮动元素会参与计算

触发bfc环境的基本方式

overflow 值不为visible
float 值不为none
position 采用绝对定位，固定定位；absolute，fixed
display  inline-block， table-cell，table-caption，flex，inline-flex

自适应

浮动+overflow 设定浮动的宽度，让另一边自适应。
一个盒子浮动，另一个设置overflow 触发盒子的
bfc环境使其不占用浮动盒子的位置。达到自适应宽度的效果。

ifc：inline formatting context 行级格式化上下文（环境）

1.ifc中的元素会在一行上从左到右排列。
2.在一行上所有元素会在该区域形成一个行框。
3.行框的宽度为包含框的宽度，高度为行框中最高元素的高度。
4.浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度。
5.行框的宽度容纳不下子元素时，子元素会换到下一行显示，并会
  产生新的行框
6.行框内的元素遵循text-align 和 vertical-align