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. 影响下面布局了

    <div class="father">
	    <div class="left">1</div>
	    <div class="middle">2</div>
	    <div class="right">3</div>
        <!-- <div class="clear"></div> -->
    </div>
    <div class="test"></div>

    <style>
        .left ,.right ,.middle {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
            border:1px solid #000;
        }
		.test {
			width: 610px;
			height: 220px;
			background-color: #000
		}
		.father {
			width: 610px;
			background-color: red;
		}
/*		.clear {
			clear: both;
		}*/
    </style>

浮动清除前

浮动清除后

6. 清除浮动的方法

1. 额外标签法

   <style>
       .clear {
                clear: both;
          }
   </style>

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

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

   <div class="father clearfix">
   	    <div class="left">1</div>
   	    <div class="middle">2</div>
   	    <div class="right">3</div>
       </div>
       <div class="test"></div>

    

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

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

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

   7. 清除浮动方法的比较

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