css浮动总结

原理：使浮动元素脱离文档流；
作用：解决页面横向排列问题；

-同一层级下，第一个元素设置浮动，脱离文档流；

• 后边如果是块级元素，会上移，在文档层，被浮动元素覆盖；
• 后边或者前边是图片或者文字，会紧紧依附在第一个浮动元素的同一行的旁边，左浮图片即在右边
• 
  特点：
  1.脱离文档流；
  2.块状元素浮动不再独占一行，他的高度由内容撑开；
  3.行内元素浮动，可以设置宽高，可以设置上下padding，margin；
  4.浮动的元素不支持margin：0 auto;
  清除浮动方法：
  1.给父元素添加高度；
  2.给父元素添加浮动；
  3.给父元素添加：display:inline-block;（ie7及一下出问题）（bfc)
  4.父元素添加：overflow:hidden;
  5.添加空标签清浮动；
  6.父元素after伪元素添加浮动；<div style="clear:both"></div>
  7.给父元素添加position:absolute/fixed
  8.父元素display：table/table-cell

 空标签清除浮动
    .clearfix {
        clear: both;
        height: 0;
        overflow: hidden;
    }

    伪元素清除浮动：
    .clearfix:after{
        content:'';
        display:block;
        clear:both;
        height:0;
        overflow:hidden;
        font-size:0;
        visibility:hidden;
        
    }
    兼容低版本IE
     .clearfix:after{
         _zoom:1;
     }

margin塌陷问题

1.父子元素，子元素设置margin-top,此刻子元素的margin-top传递给父元素上，子元素的margin不起作用，
解决方案：
*外层元素padding代替
*外层元素 overflow:hidden;
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
*内层元素 加float:left;或display:inline-block;
内层元素padding:1px;

2.兄弟元素，上边元素的下margin,和下边元素的上margin间距是两者取的较大值，解决方案：
01.给其中一个兄弟元素display:inline-block;
02.只设置一个margin值;