CSS之标准流（普通流）、浮动以及清除浮动的方法

传统网页布局的方式有三种：

1.普通流（标准流）

2.浮动

3.定位

一、标准流（普通流/文档流）

标签按照规定好的默认方式排列

1.块级元素独占一行，从上到下排列，常用的会计元素如div、hr、p、h1~h2、ul、ol、dl、form、table

2.行内元素会按照顺序从左到右排序，碰到父元素边缘自动换行。常用的元素：span、a、i、em

二、浮动

1.使用浮动的原因：很多布局效果，标准流是没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变标签默认的排列方式。浮动最典型的应用：多个块级元素一行内排列显示，多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

2.什么是浮动

float属于用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含快或者另外一个浮动框的边缘。其语法如下

选择器{float:属性值;}

属性值	描述
none	元素不浮动(默认值)
left	元素向左移动
right	元素向右移动

3.浮动的特性

3.1 浮动元素会脱离标准流

• 脱离标准流的控制，移动到指定位置
• 浮动的盒子不在保留原先的位置，其他盒子会占据他原先的位置，而出现两个盒子层叠的效果（浮动盒子悬浮在其他盒子表面）

3.2浮动的元素会一行内显示并且元素顶部对齐

• 如果多个盒子都设置的浮动，则他们会按照属性值一行内显示，并顶端对齐排列。
• 浮动元素互相贴靠在一起，没有缝隙，如果父级元素宽度装不下浮动盒子，多出的盒子会另起一行对齐。

3.3浮动的元素会具有行内快元素的特性

• 任何模式的元素添加浮动之后都具有行内块元素相似的特性
• 块级元素如果没有设置宽度，默认的宽度和父级一样宽，但是添加浮动后，他的大小根据内容来定。

4.浮动元素经常和标准流父级搭配使用

    为了约束浮动元素的位置，先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

    案例一

     如类似这种几个排版相同的盒子排成一排，可用无序列表来做，采用父级标准流+float搭配应用。 代码如下：

    


    

        

            
            

                这是一张非常好看的图片这是一张
            

                你看看
        
        

            
            

                标题图片的
            

                你看看
        
        

            
            

                标题图片的
            

                你看看
        
        

            
            

                标题图片的
            

                你看看
        
        

            
            

                标题图片的
            

                你看看
        
        

            
            

                标题图片的
            

                你看看
        
    

运行效果如下

案例二、将一个整体分为左右两部分，整体用一个div,在其中嵌套两个浮动的div,右边的div中放八个浮动无须列表或者div。代码如下所示

    


    

        

            左位置
        

            

            
                
                

                    非常美丽的图片
                

                    你看看
            
             

            
                
                

                    非常美丽的图片
                

                    你看看
            
              

            
                
                

                    非常美丽的图片
                

                    你看看
            
              

            
                
                

                    非常美丽的图片
                

                    你看看
            
              

            
                
                

                    非常美丽的图片
                

                    你看看
            
                

            
                
                

                    非常美丽的图片
                

                    你看看
            
        
    

运行效果如下：

三、清除浮动

 1.为什么要清除浮动？

 答：由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动有不占位置，最后父级盒子的高度为0时，就会影响下面标准流盒子。

2.清除浮动的本质

• 清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

3.清除浮动策略

闭合浮动。只让浮动在父盒子内部影响。不影响父盒子外面的其他盒子。

4.语法

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除两侧浮动元素

5.清除浮动的方法

5.1额外标签法

额外标签法又称为隔墙法，W3C推荐做法。

额外标签法会在浮动元素末尾加一个空标签。例如

，或者其他标签（如
等）

优点：通俗易懂，书写方便。

缺点：添加许多无意义标签，结构化差。

注意：要求这个新空标签必须是块级元素。

5.2父级添加overflow

可以给父级添加overflow属性，将其属性设置为hidden、auto或者scroll。

优点：代码简洁

缺点：无法显示溢出部分

5.3:after伪元素法

:after方式是额外标签法的升级版，也是给父元素添加。

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1; /* IE6、7专有 */
}

优点：没有增加标签，结构简单

缺点：要照顾低版本浏览器

5.4双伪元素清除浮动

也是给父元素添加。

.clearfix:befor,.clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix:{
    *zoom: 1; /* IE6、7专有 */
}

优点：代码更加简洁

缺点：要照顾低版本浏览器