float 浮动

01. 浮动

浮动最早的使用是出自<img src="#" align="right">，用于文本环绕图片的排版处理。如今浮动作为CSS中常用的布局方式。

定义

float 浮动

浮动元素脱离普通流，然后按照指定方向，向左或者向右移动，碰到父级边界或者另外一个浮动元素停止

值: left | right | none | inherit

初始值: none

应用于: 所有元素

继承性: 无

特性

【1】浮动流

正常流中元素一个接一个排列；浮动元素也构成浮动流。

【2】块级框

浮动元素自身会生成一个块级框，而不论这个元素本身是什么，使浮动元素周围的外边距不会合并。

【3】包裹性

浮动元素的包含块是指其最近的块级祖先元素，后代浮动元素不应该超出包含块的上、左、右边界。若不设置包含块的高度，包含块若浮动，则包含块会延伸，进而包含其所有后代浮动元素；若不设置包含块的宽度，包含块若浮动，则包含块宽度由后代浮动元素撑开。

【4】破坏性

浮动元素脱离正常流，并破坏了自身的行框属性，使其包含块元素的高度塌陷，使浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框重新排列。

表现

[1]浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(左)外边界。除非后出现浮动元素的顶端在先出现浮动元素的底端下面

[2]左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。右浮动元素的左外边界也不会在其左边任何左浮动元素的右外边界的左边

[3]左(或右)浮动元素左边(右边)有另一个浮动元素，前者右外边界不能在其包含块右(左)边界的右边(左边)

[4]浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界

[5]一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素

[6]浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高

[7]如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端要高

[8]浮动元素必须尽可能高地放置

[9]左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。位置越高，就会向右或向左浮动得越远

重叠

浮动元素超出父元素边界的方法有两种：一种是浮动元素的宽度大于父元素的宽度，另一种就是设置负外边距。如果浮动元素存在负外边距，且浮动元素与正常流元素重叠

【1】行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示

【2】块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示

02. 清除浮动

清除浮动，其实就是解决浮动元素的包含块高度塌陷的问题。

定义

clear 清除

值: left | right | both | none | inherit

初始值: none

应用于: 块级元素(块级元素指block元素，不包括inline-block元素)

继承性: 无

left:左侧不允许存在浮动元素
right:右侧不允许存在浮动元素
both:左右两侧不允许存在浮动元素
none:允许左右两侧存在浮动元素

[注意]设置clear属性的元素并不能改变浮动元素，而只能改变自身

CSS2.1引入了一个清除区域，清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围，这意味着元素设置clear属性时，它的外边距不改变。

方法

对于标准浏览器来说，清浮动其实就两种方法，一种是在浮动元素下面添加新元素设置clear属性；另一种是触发包含块的BFC，使其包含浮动元素。而对于IE7-浏览器，则用到其特有属性haslayout

【1】clear属性

[1]<div style="clear:both"></div>

<注意>并不是很适用，若包含块为<ul>，则子元素只能为<li>，则在<li>后面添加<div>元素不合适

[2]<br style="clear:both">

<注意>虽然clear属性只应用于块级元素，但在除IE7-以外的其他浏览器都可以将clear属性应用于<br>元素

[3]为浮动元素的after伪元素设置clear属性

.clear:after{content:""; display: block; clear: both;}

<注意>IE7-浏览器不支持after伪元素

【2】BFC

[1]float: left/right

[2]position:absolute/fixed

[3]display:inline-block/table-cell/table-caption/flex

[4]overflow:hidden/scroll/auto

【3】IE7-

关于IE7-浏览器有一个其特有的属性haslayout，当触发包含块的haslayout时，浮动元素被layout元素自动包含

[1]display:inline-block

[2]height/width:除auto外

[3]float: left/right

[4]position: absolute

[5]writing-mode: tb-rl

[6]zoom: 除normal外

兼容

在所有浏览器中都兼容的清浮动方案如下：

.clear:after{content:""; display: block; clear: both;}
.clear{zoom: 1;}

除了清除浮动外，常常也需要解决外边距margin重叠的问题。这时，清除浮动和解决margin重叠的代码如下

.clear:before,.clear:after{content:"";display:table;}
.clear:after{clear:both;}
.clear{zoom:1}