margin塌陷与margin合并、浮动流

一、margin 塌陷

父子嵌套元素，垂直方向的margin,父子会粘合在一起，取最大的值。子级不能根据父级定位，好像父级没有棚。
解决方案，触发bfc（block format context），使用另一套语法规则
如何触发一个盒子的bfc,改变父级的渲染规则
position:absolute
display:inline-block
float:left/right
overflow:hidden

也可父级加一个线，border-top:1px solid red;

二、margin 合并
两个兄弟方向的margin是合并的，取最大值。
解决办法，加个父级，父级触发bfc
一般不解决

三、float
子元素加float，变成行级元素,不够就占行
浮动元素产生了浮动流，块级元素看不到他们，产生bfc的元素和文本类属性的元素以及文本都能看到浮动元素。
clear:both,清除浮动流

四、文字溢出
单行文本，溢出用...
   white-space: nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
多行文本
   截断
   height:40px;
   line-height:20px
五、背景图片
   backgroud-image:url(fy.jpg);
   backgroud-size:100px 100px;
   backgroud-repeat:no-repeat;//不铺满repeat-x,repeat-y
   backgroud-position:100px 100px;//left top
六、网速不好的时候,照样显示内容
  <a href='http://www.taobao.com' target="_blank">淘宝网</a>
   text-indent:200px;
   white-space:nowrap;
   overflow:hidden;

    第二种方法
    padding-top:58px;
    height:0;
    overflow:hidden;

七、行级元素转化
  span 在
  position:absolute;
  float:left/right;
  可以有width:100px;

  会在内部加属性display:inline-block
  span 内部有文字，外部的文字会与里面的文字底对齐。