CSS浮动

CSS浮动

  以下包含很多个人理解，如有错误，欢迎指出。

  下面首先介绍了浮动的目的，然后对浮动一些关键性内容进行了说明，最后提到了清除浮动的几种方法。

为什么要浮动

  CSS浮动设计之处是为了实现文字环绕图片布局的效果，后来才被用于布局，当我们希望多个块能处于同一行，比如说一个左右分布的目录栏和内容框，我们就能用浮动来解决这一问题。

浮动的特点

  通过将元素float属性被设置为left或是right，可以将元素转变为浮动元素。浮动元素包括如下几个关键性内容。

1. 转变为块级元素

     当元素被设置为浮动之后，它就拥有了块级元素的内部布局结构，比如可以设置它的长和宽，与块级元素不同的是，浮动元素它不会独占一行，因此在整体布局上它更像是行内元素。

2. 位置发生变化

     对于非浮动元素，他们在页面上呈垂直分布，如case1所示；而元素变为浮动元素之后，会脱离它原本的位置，按浮动布局的规则重新定位，以左浮动元素为例来介绍浮动元素定位的动态过程。下面，outer-edge表示包含块级元素margin区域的外边框，inner-edge表示包含块级元素content区域的内边框，详见盒模型;

   1. 首先确定元素浮动行，如果当前浮动元素之前有浮动元素，则确定上一个浮动元素的浮动行为该浮动元素的浮动行，否则，确定浮动元素原本所在行为该浮动元素的浮动行；其中，浮动元素的浮动行是指浮动元素顶部top-outer-edge所在像素行；

   2. 左浮动元素在浮动行尝试向左浮动；如果当前浮动行没有左浮动元素，则元素尝试浮动在其left-outer-edge与包含块的left-inner-edge重合的位置，如case2；如果该行有左浮动元素，则元素尝试浮动在其left-outedge与当前行最后一个左浮动元素的right-outer-edge重合的位置，如case3；记该位置为1号位；

   3. 如果左浮动元素在1号位上能满足其right-outer-edge不超过该行所有右浮动元素的left-outer-edge（case6超过了）以及包含块的right-inner-edge（case4,5超过了），则1号位能确定为元素最终的浮动位置，如case2,3；否则下移左浮动元素，根据步骤2)重新尝试在新的一行尝试左浮动，直至找到满足要求的浮动位置，如case4-6；
      

   注：这个过程隐含了浮动元素的几个特性

   1. 处于同一浮动行的元素按照top-outer-edge对齐；

   2. 浮动元素之间无重叠；

   3. 浮动元素的浮动行不会在上一个浮动元素的浮动行的上方；

3. 脱离文档流

     对块级元素看来，浮动元素就像是浮在页面上一般，不会对它们的布局造成影响，因此会造成父元素塌陷以及元素重叠的现象。举例来说明上面两种现象。

   • 父元素塌陷现象是指父元素不能完全包含所有子元素的现象，这种现象往往是布局过程中我们不希望看到的。在之前的case1-case6中，父元素的高度是固定大小的，所以我们没有发现这个现象，如果我们不设置将父元素的高度不设置，那么对于不浮动的块级元素，它们是会自动撑开父元素的高度的，如case7所示，也就不存在父元素塌陷问题，而浮动元素就不会，所以会造成如case8所示的父元素塌陷问题。

   • 元素重叠的现象如case8所示，因为浮动元素float-box2脱离了文档流，所以块级元素box2就当浮动元素float-box不存在一样进行定位，导致float-box2和box2出现了重叠，而且浮动元素总是处于非浮动元素的上方。需要注意，z-index只能在position属性值为relative或absolute或fixed的元素上有效，不能解决浮动重叠的问题。

   

     但是对于行内元素来说浮动元素是占位的，行内元素会环绕浮动元素进行布局，即使这些行内元素存在于非浮动的块级元素中，他们也不会与浮动元素发生重叠。比如case8中的box3中有一张图像，那么这张图像就会被浮动元素挤到下面，同时会发现它的移位不会对container-box的大小有影响。

   

清除浮动的目的与方法

  清除浮动的目的有两个，一个是实现换行浮动布局，另一个是解决父元素塌陷问题。换行浮动布局是指有浮动元素可以不接着上一个浮动元素进行排列的布局方式。

  第一个目标通过设置浮动元素的clear的属性就可以实现，clear属性包含left，right，both，none，inherit这几个值，clear：left表示该浮动不要紧贴上一个左浮动元素进行布局，clear：right和clear：none的含义类似。

  第二个问题稍微复杂的点，主要有下面几种解决方法。具体看博客http://www.cnblogs.com/ForEvErNoME/p/3383539.html

A. 额外标签法

  在所有浮动元素的后面添加一个标签，可以是div,br等，然后给标签添加style=”clear:both”属性。但是该方法会给文档添加多少无意义的空标签，代码不够优雅，后期不容易维护，所以不推荐。

B. 类似A，给最后一个浮动元素后面一个兄弟元素添加style=”clear:both”；

C. 给父元素设置style=”overflow: hidden; zoom: 1;”，zoom: 1是为了兼容IE6;

D. 利用伪元素。给父元素的伪元素::after添加下述代码，同时给父元素设置style=”*zoom: 1;”

.container-box::after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

建议：在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。

参考资料

[1] CSS技巧（一）：清除浮动

[2] 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

[3] CSS浮动(float,clear)通俗讲解

[4] 那些年我们一起清除过的浮动

[5] CSS float浅析

[6] CSS Pocket Reference