浮动的简单理解

行内元素和块级元素都可以浮动，浮动后都变为块级元素；

浮动元素会使周围的行框缩短，所以就会产生文本元素围绕浮动框的现象。所以常用来进行文本围绕图片的表现；

如果上边先有浮动元素，对于块级元素形成的块级框就会向上到浮动元素的下方，但是里边包含的文本还是在浮动元素的周围或者包含不到就跑的下边；

先有浮动，后有普通流中的

<p style="width:200px;height:200px;border: 1px solid red;">
        这是对浮动的测试,先有浮动后有文档流中的元素的时候……
</p>
<P style="float:left;width:400px;height:200px;border: 1px solid blue;">
    <img src="images/001.jpg" style="width:200px;height:200px;"/>
</P>

上边代码是左侧图片的描述

<p style="width:200px;height:200px;border: 1px solid red;">
        这是对浮动的测试,先有浮动后有文档流中的元素的时候……
</p>
<P style="float:left;width:400px;height:200px;border: 1px solid blue;">
    <img src="images/001.jpg" style="width:198px;height:198px;"/>
</P>

上边代码是右侧图片的描述

浮动的简单理解