CSS布局 浮动float属性

传统网页布局三种方式

• 标准流（默认）
• 浮动（float）
• 定位（position）
  
   

1.为什么需要浮动？

标准流无法很方便的使多个块级元素（DIV）水平排列成一行。

可以转为行内块元素，但是行内块元素之间有默认间距，很难控制。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

2.什么是浮动？

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或者另一个浮动框的边缘。

float属性的值有三个，none（不浮动），left（向左浮动），right（向右浮动）。

3.浮动的特性

3.1浮动元素会脱离标准流（脱标）

脱离标准流的控制移动到指定的位置，俗称脱标

浮动的盒子不再保留原先的位置

如图：当那位乘客浮动起来，原先的位置不再保留，后面的元素补上位置

标准流：                                                                                     给粉红色盒子添加属性：float：left；后                  

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

一行排列

当浏览器窗口缩小时

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

可以设置宽、高、边距等。

4.浮动布局注意点

4.1 浮动元素经常搭配标准流的父元素

4.2 一个元素浮动了，理论上其余兄弟也要浮动

一个大盒子里面有多个小盒子，如果一个小盒子浮动了，那么其他兄弟盒子也应该浮动，以免引起问题。

浮动的盒子只会影响该盒子后面的标准流，不会影响前面的标准流。

5.为什么要清除浮动？

1. 父级元素没高度
2. 子盒子浮动了
3. 影响下面布局了

    

	    
1
	    
2
	    
3
        
    
    

 

浮动清除前

浮动清除后

6. 清除浮动的方法

1. 额外标签法

   在浮动元素末尾添加一个空标签，类名为 clear

2. 父级元素添加overflow:hidden属性值
3. 父级元素添加after伪元素
    

   
   	    
   1
   	    
   2
   	    
   3
       
       
   

    

    

4. 父级元素添加双伪元素

   7. 清除浮动方法的比较

   清除浮动方式	优点	缺点
   额外标签法	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
   父级添加overflow属性法	书写简单	溢出隐藏
   父级添加伪元素法	结构语义化正确	IE6-7 不支持 :after，兼容性问题
   父级添加双伪元素法	结构语义化正确	IE6-7 不支持 ::after，兼容性问题