CSS浮动

网页的常用格式

• 标准流
  行内元素单独一行，块级元素是上下显示的，标准流是最稳定的。
• 浮动流
  脱离标准流，影响标准流的排布。
• 定位流
  完全脱离非标准流，不会影响标准流。
  浮动的目的：把多个块级元素放到想要的一行上面。
  Float:left right none both
  特点：
  1 脱离标准流，浮动漂浮在标准流的上面；
  2 浮动是左右浮动，块级元素放到想要的一行上面。
  为什么要清除浮动？
  reason:浮动会影响标准流。
  清除浮动的方法
• 父级div定义高度

    
    
    


父级
左边
右边

原理：父级div手动定义height,解决了div无法自动获取高度的问题。
缺点：只适合高度固定的布局，要给出精确的高度。

• 结尾处加上空div标签 clear:both;

    父级
    
左边
    
右边
    

原理：让父级div自动获取高度

• 父级div定义伪类：after和zoom

       .divf{
            width: 300px;
            background:red;
            zoom: 1;
        }
        .divf:after{
            display: block;
            visibility: hidden;
            content: "";
            clear: both;
            height:0;
        }

• 父级div定义overflow:hidden
  原理：必须定义width和zoom：1，同时不能定义height,浏览器会自动添加高度；
  缺点：不能和position配合使用，因为超出范围的会被隐藏

• 父级div定义overflow:auto
  原理：同上
  缺点：内部高度超过父级高度，会出现滚动条。

  
  
  

还有其他方法，不做描述。