css基础--流的破坏与保护之float

1、浮动的本质就是为了实现文字环绕效果。而这种文字环绕，主要指的就是文字环绕图片显示的效果。
1）包裹性；
2）块状化并格式化上下文；
3）破坏文档流；
4）没有任何margin合并；
所谓“包裹性”，由“包裹”和“自适应性”两部分组成。
（1）包裹。假设浮动元素父元素宽度200px，浮动元素子元素是一个128px宽度的图片，则此时浮动元素宽度表现为“包裹”，就是里面图片的宽度128px，代码如下：

.father { 
width: 200px; 
} 
.float { 
float: left; 
} 
.float img {
 width: 128px; 
 } 
 <div class="father">   
 <div class="float">    
  <img src="1.jpg">   
  </div> 
  </div>

（2）自适应性。如果浮动元素的子元素不只是一张128px宽度的图片，还有一大波普通的文字，例如：

<div class="father">   
<div class="float">     
<img src="1.jpg">
我是帅哥，好巧啊，我也是帅哥，原来看这本书的人都是帅哥~   </div> 
</div>

则此时浮动元素宽度就自适应父元素的200px宽度，最终的宽度表现也是200px。当然，要想最大宽度自适应父元素宽度，一定是在浮动元素的“首选最小宽度”比父元素的宽度要小的前提下，比方说上面示意的“我是帅哥”等文字全是一连串超长的英文字母，则浮动元素的宽度显然就不是200px了。
块状化的意思是，元素一旦float的属性值不为none，则其display计算值就是block或者table。

span {   
display: block;   /* 多余 */   
float: left; 
} 
span {     
float: left;      
vertical-align: middle;    /* 多余 */ 
}

所以以上的代码出现没有意义。也不要指望使用text-align属性控制浮动元素的左右对齐，因为text-align对块级元素是无效的。


2、float的作用机制
float属性有个著名的特性表现，就是会让父元素的高度塌陷。

<div class="father">   
<img src="me.jpg"> 
</div> <p class="animal">小猫1，小猫2，...
</p>

然而，“高度塌陷”只是让跟随的内容可以和浮动元素在一个水平线上，但这只是实现“环绕效果”的条件之一，要想实现真正的“环绕效果”，就需要另外一个平时大家不太在意的特性，那就是“行框盒子和浮动元素的不可重叠性”，也就是“行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在正常定位状态下只会跟随浮动元素，而不会发生重叠”。注意，这里说的是“行框盒子”，也就是每行内联元素所在的那个盒子，而非外部的块状盒子。实际上，由于浮动元素的塌陷，块状盒子是和图片完全重叠的，例如，我们给环绕的

元素设置个背景色，同时把图片搞透明，则效果如图6-6所示.

但是，块状盒子中的“行框盒子”却被浮动元素限制，没有任何的重叠，我们可以借助::first-line伪元素暴露第一行的“行框盒子”区域，CSS代码如下:

.animal:first-line {   
background: red;   
color: white;  
}

这种“限制”是根深蒂固的，也就是“行框盒子”的区域永远就这么大，只要不改变当前布局方式，我们是无法通过其他CSS属性改变这个区域大小的。这就是在前面提到的浮动后面元素margin负无穷大依然无效的原因。例如，这里再新增如下CSS代码：

.animal {   margin-left: -100px; }

就会发现，只有外部的块状容器盒子尺寸变大，而和浮动元素垂直方向有重叠的“行框盒子”依然被限死在那里，如图下所示

很多人会有这样的想法，就是认为一个元素只要设置了具体的高度值，就不需要担心float属性造成的高度塌陷的问题了，既然有了高度，何来“高度塌陷”,这句话对不对呢？是对的。但是，其中也隐含了陷阱，因为“文字环绕效果”是由两个特性（即“父级高度塌陷”和“行框盒子区域限制”）共同作用的结果，定高只能解决“父级高度塌陷”带来的影响，但是对“行框盒子区域限制”却没有任何效果，结果导致的问题是浮动元素垂直区域一旦超出高度范围，或者下面元素margin-top负值上偏移，就很容易使后面的元素发生“环绕效果”

<div class="father">   
<div class="float">     
<img src="zxx.jpg">   
</div> 我是帅哥，好巧啊，我也是帅哥，原来看这本书的人都是帅哥~ </div> 
<div>虽然你很帅，但是我对你不感兴趣。</div>
.father {  
height: 64px;   
border: 1px solid #444; 
} 
.float {   
float:left; 
} 
.float img {   width: 60px; height: 64px; }

从这段代码可以看出父级元素.father高度设置的和图片高度一模一样，都是64px。按道理，下面的“虽然你很帅，但是我对你不感兴趣。”这些文字应该居左显示，但最后的结果却是图所示的这样.

应该都知道内联状态下的图片底部是有间隙的（因为形成了行框盒子，有幽灵空白节点，一般默认line-height为20px,font-size为14px,vertical-align默认是baseline，那么图片底部和x底部对齐，x往下还有半个行距的空隙（（20-14）/2），也就是.float这个浮动元素的实际高度并不是64px，而是要比64px高几像素，带来的问题就是浮动元素的高度超出.father几像素。于是，下面的文字就遭殃了，因为“虽然你很帅…”这段文字所在的“行框盒子”和浮动元素在垂直位置有了重叠，尽管就那么几像素。于是，区域被限制。后面的文字形成环绕。因此最好进行清楚浮动的操作。
3、float更深入的作用机制

<h3>标题<a href="#">更多</a></h3>

a设置右浮动，真实显示是下图二所示。

1）浮动锚点是float元素所在的“流”中的一个点，这个点本身并不浮动，就表现而言更像一个没有margin、border和padding的空的内联元素。
2）浮动参考指的是浮动元素对齐参考的实体。
在CSS世界中，float元素的“浮动参考”是“行框盒子”，也就是float元素在当前“行框盒子”内定位。在CSS新世界中，float被赋予了更多的作用和使命，“浮动参考”就不仅仅是“行框盒子”了。
正是因为float定位参考的是“行框盒子”，所以“更多”才会在第二行显示。每一行内联元素都有一个“行框盒子”，这个例子中标题文字比较多，两行显示了，因此有上下两个“行框盒子”，而“更多”所在的元素是在标题文字后面，位于第二行，因此，这里设置了float:right的元素是相对于第二行的“行框盒子”对齐的。
假如说我们的标题文字再多两个字，正好两行，请问：“更多”两字又当如何显示呢？如果还用浮动参考解释就不合适了，如果float元素前后全是块元素，那根本没有“行框盒子”，何来对齐的说法？此时，就需要上面提到的“浮动锚点”出马了。“浮动锚点”其作用就是产生“行框盒子”，因为“浮动锚点”表现如同一个空的内联元素，有内联元素自然就有“行框盒子”，于是，float元素对齐的参考实体“行框盒子”对于块状元素也同样适用了，只不过这个“行框盒子”由于没有任何内容，所以无尺寸，看不见也摸不着罢了

4、float与流体布局

<div class="father">  
 <img src="me.jpg">   
 <p class="animal">小猫1，小猫2，...</p> 
 </div> 
 .father {   
 overflow: hidden; } 
 .father > img {   
 width: 60px; 
 height: 64px;   
 float: left; } 
 .animal {   margin-left: 70px; }

和文字环绕效果相比，区别就在于.animal多了一个margin-left:70px，也就是所有小动物都要跟男主保持至少70px的距离，由于图片宽度就60px，因此不会发生环绕，自适应效果达成。原理其实很简单，.animal元素没有浮动，也没有设置宽度，因此，流动性保持得很好，设置margin-left、border-left或者padding-left都可以自动改变content box的尺寸，继而实现了宽度自适应布局效果。

实现三栏布局，中间自适应，第二个a一定要放在h的前面。自适应的那个元素不能是内联元素。

<div class="box">   
<a href class="prev">&laquo; 上一章</a>  
 <a href class="next">下一章 &raquo;</a>   
 <h3 class="title">第112章动物环绕</h3> 
 </div>

.prev {   
float: left; 
} 
.next {   
float: right; 
} 
.title {   
margin: 0 70px;   
text-align: center; 
}