CSS Float(浮动)

CSS Float(浮动)

float

float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。

语法说明

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: revert;
float: unset;

属性值

属性	描述
left 元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动
inherit	从父元素继承 float 属性的值

float的包裹性

所谓包裹性一目了然。block元素不指定width的话，默认是100%，一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。（这也是通常float元素需要手动指定width的原因）
举例说明:

<div style="border:4px solid blue;">
    <img src="img/25/1.jpg" />
</div>
<div style="border:4px solid red;float:left;">
    <img src="img/25/2.jpg" />
</div>
<div style="border:4px solid green;">
    <img src="img/25/3.jpg" /> 
</div>

效果:

float的高度欺骗

首先声明：其实是CSS层级在起作用，但CSS层级适合单独写一篇，内容实在太多，不适合在这里展开，就理解为高度欺骗吧。

例1中浮动float被设在了外围div上，因此高度欺骗性没体现出来。现在给内层img元素设定float。

举例说明:

<div style="border:4px solid blue;">
    <img src="img/25/1.jpg" />
</div>
<div style="border:4px solid red;">
    <img style="border:4px solid yellow;float:left;" src="img/25/2.jpg" />
</div>

效果:

float的清除浮动

有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。

浏览器兼容性