float浮动以及浮动样式清除(十五)

一.浮动(float)

css的定位机制: 普通流/浮动和定位

元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。

选择器 {
        float: 属性值:
        
}

属性值: left/right/none

浮动的特性:

• 浮动的元素总是找离他最近的父级元素对齐,但不会超出内边距的范围.
• 父盒子里面的子盒子,如果需要所有子元素一行对齐显示,就需要所有子元素都进行浮动.
• 元素添加浮动后,会变成块元素,元素的大小取决于定义的大小或者默认的内容多少, 浮动根据元素书写的位置显示相应的浮动.

二.浮动总结

1.浮动脱离文档流的,原来还在文档流的元素,会向上移动.

2.元素浮动以后,会尽量向页面的左上或是右上漂浮,直到遇到父元素的内边距(padding)或者其他浮动元素.

3.浮动的元素不会超过块元素.

4.浮动的元素不会超过上边的兄弟元素.

5.浮动会更改元素的显示方式: block.

三.版心和布局流程

1.布局流程

• 确定页面版心,即可视区.
• 分析页面中的行模块,以及每个行模块中的列模块.
• 制作HTML结构.
• CSS初始化,运用盒子模型原理,通过DIV/CSS布局来控制页面的各个模块.

四.内容溢出时处理 overflow

overflow 属性规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

五.清除浮动

使用方法一：

    .clearfix:before,.clearfix:after { 
      content:"";
      display:table;  
    }
    
    .clearfix {
      *zoom:1;
    }
    .clearfix:after {
     clear:both;
    }

优点：  代码更简洁

缺点：  由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 小米、腾讯等

进阶安全版

使用方法二：

    .clearfix{
    	zoom:1;
    }
    .clearfix:after,.clearfix:before{
        content:"";
        display:table;
    }
    .clearfix:after{
        clear:both;
        visibility:hidden;
        font-size:0;
        height:0;
    }