《四》CSS 中的 float 属性

CSS 的定位机制有 3 种：普通流（标准流）、浮动和定位。

普通流（标准流）：一个网页内标签元素按照从上到下、从左到右的顺序排列，块级元素会独占一行，行内元素会按顺序依次前后排列。

未脱离文档流，即浏览器按照 dom 结构从上而下，从左而右对页面进行渲染时，某元素按照顺序出现在页面中。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
脱离标准文档流的方法：浮动、绝对定位、固定定位。

<div style="width:500px;">
   <image src="./ic_chahua.png" style="width:300px;height:300px;"/>
   <span>呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜</span>
</div>

浮动最早用来控制图片，以实现文字环绕图片的效果。

<div style="width:500px;">
    <image src="./ic_chahua.png" style="width:300px;height:300px;float:right;"/>
    <span>呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜</span>
</div>

浮动框脱离文档流，不占据文档空间，可以覆盖文档的普通流中的块框；浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止；如果包含框太窄，无法容纳水平排列的几个浮动元素，那么其它浮动块向下移动，直到有足够的空间；如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”；浮动的元素不再区分块级元素和行内元素，它们已经脱离了标准文档流，一律能够设置宽度和高度。

浮动的顺序贴靠特性：子盒子会按照顺序进行贴靠，如果没有足够的空间，则会寻找再前一个兄弟元素。


浮动最本质的功能就是用来实现并排。

浮动的语法：

浮动的语法：float：left/right/none；

属性值：

1. left：元素向左浮动。
2. right：元素向右浮动。
3. none：默认值，元素不浮动。

<div style="width:500px;">
    <div style="width:200px;height:200px;background:#de0432;float:left;">你好</div>
    <div style="width:300px;height:300px;background:#2bc8de;">世界</div>
</div>

当给第一个 div 添加左浮动后，第一个 div 脱离文档流，遇到父元素的左边界停止，第二个 div 上移。

为什么第二个 div 中的文字没有被遮挡？
如果将整个元素看做一层，则下半层是元素本身（背景样式等），上半层是元素中的内容。浮动会提升下半层层级，所以第一个 div 会遮挡第二个 div 的背景样式等，但第二个 div 和第一个 div 的上半层在同一层级，所以文字不会被遮挡。

.box {
		width: 200px; 
		height: 100px;
		float: right;
		border: 2px solid #ccc;
		padding: 10px;
}
		
<div>
	<div class="box">1111</div>
	<div class="box">2222</div>
	<div class="box">3333</div>
</div>

所有子盒子都设置了右浮动之后，子盒子的排列顺序和代码中的写入顺序是相反的。

浮动的影响：

影响兄弟元素的位置；使父元素产生高度塌陷；

清除浮动：

清除浮动的语法：clear：none、left、right、both;

属性值：

1. none：默认值，允许两边都可以有浮动元素。
2. left：不允许左边有浮动元素。
3. right：不允许右边有浮动元素。
4. both：不允许有浮动元素。

CSS的清除浮动，只会影响使用浮动的元素本身，不会影响其他元素。

清除浮动的方法及其优缺点：

1. 在父级元素的末尾加入一个空的 div 标签，并设置它的 css 属性 clear: both。

   .clear{
   	clear: both;
   }
   
   <div class=”box”>
        <div class=”div1”>1</div>
        <div class=”div2”>2</div> // 假设 div1、div2 被设置了浮动 
        <div class=”clear”></div>
   </div>
   

   原理：空的 div 能让父级获取到高度，是因为设置之后这个 div 的左右都不能有浮动元素，所以这个空的 div 元素会向下移动，直到换行，而为了让这个 div 能够换行，父元素至少要包含浮动元素的高度才能提供足够的空间，这样实现清除浮动的影响。
   优点：简单，代码少；浏览器支持度好，不容易出现怪问题。
   缺点：初学者难以理解原理；如果页面浮动布局多，就要增加很多空 div，给人的感觉不好。

2. 父级 div 定义 overflow:hidden。

   .div{
   	overflow: hidden;
   	width: xx;
   } //必须定义 width 或者 zoom:1；同时不能定义高度，因为浏览器会自动检测浮动区域的高度
   
   <div class=”box”>
       <div class=”div1”>1</div>
       <div class=”div2”>2</div> // 假设 div1、div2 被设置了浮动  
   </div>
   

   原理：overflow:hidden 的意思是超出的部分要裁切隐藏掉，那么如果 float 的元素不占普通流位置，普通流的包含块要根据内容高度裁切隐藏，如果高度是默认值 auto，那么不计算其内浮动元素高度就裁切，就有可能会裁掉 float 的元素，这是反布局常识的，所以如果没有明确设定容器高情况下，它要计算内容全部高度才能确定在什么位置 hidden，浮动的高度就要被计算进去，顺带达成了清理浮动的目标。
   优点：简单，代码少；浏览器支持度好，不容易出现怪问题。
   缺点：不能和 position 配合使用，因为超出尺寸的会被隐藏。

3. 父级 div 定义伪元素 ::after。

   .box::after(
   	clear: both;
   	display: block;
   	content: ””;
   	height: 0;
   	visibility: hidden;
   )
   .box{
   	zoom: 1;
   } //为了兼容IE6、7
   
   <div class=”box”>
        <div class=”div1”>1</div>
        <div class=”div2”>2</div> // 假设 div1、div2 被设置了浮动  
   </div>
   

   原理:相当于生成一个空的 div。
   优点：浏览器支持度好，不容易出现怪问题。（目前很多大型网站都有使用）
   缺点：代码多；初学者难以理解原理；要两句代码结合使用，才能让主流浏览器都支持。