CSS(七)--浮动（css学习重点之一）

浮动（float）

1.CSS 布局的三种机制:

 CSS 提供了3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位。

1.1 普通流（标准流）

• 块级元素会独占一行，从上向下顺序排列；
  常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
• 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
  常用元素：span、a、i、em等

2. 浮动

• 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

3. 定位

• 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

虽然我们前面学过行内块（inline-block） 但是他却有自己的缺陷：
     1. 它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。
     2. 它不能实现以上第二个问题，盒子左右对齐 

2. 浮动

2.1 概念：

元素的浮动是指设置了浮动属性的元素会
1. 脱离标准普通流的控制
2. 移动到指定位置。

2.2 作用

1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2. 可以实现盒子的左右对齐等等…
3. 浮动最早是用来控制图片，实现文字环绕图片的效果。

2.3 语法：

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

2.4特点：

• 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
• 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
• 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙

3. 浮动拓展

3.1 浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也**不会超过**父盒子的内边距

3.2 浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

• 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
• 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
• 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
• 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

4. 清除浮动：

4.1 原因

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

4.2 语法

选择器 { clear: 属性值; } // clear 清除

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

4.3 浮动清楚方法

（1）父级添加overflow属性方法

 可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。
缺点：  内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

（2）使用after伪元素清除浮动

 .clearfix:after {  
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
   }   
 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
 
   优点： 符合闭合浮动思想  结构语义化正确
   缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
   代表网站： 百度、淘宝网、网易等

(3). 使用双伪元素清除浮动

.clearfix:before,.clearfix:after { 
	  content:"";
	 display:table; 
	}
.clearfix:after {
	 clear:both;
	}
.clearfix {
	  *zoom:1;
}
	优点：  代码更简洁
   	缺点：  由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
	 代表网站： 小米、腾讯等

5. 什么时候使用清除浮动：

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了，我们就应该清除浮动了。

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