码迷,mamicode.com
首页 > 其他好文 > 详细

浮动的简单理解

时间:2014-08-20 09:17:46      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   2014   div   代码   log   

行内元素和块级元素都可以浮动,浮动后都变为块级元素;

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

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

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

bubuko.com,布布扣bubuko.com,布布扣

<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>

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

 

浮动的简单理解,布布扣,bubuko.com

浮动的简单理解

标签:style   blog   http   color   2014   div   代码   log   

原文地址:http://www.cnblogs.com/bjchenxn/p/3923768.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!