css浮动float怎么用

这篇文章给大家分享的是有关css浮动float怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

平南网站建设公司创新互联公司,平南网站设计制作,有大型网站制作公司丰富经验。已为平南1000多家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的平南做网站的公司定做!

一、float语法结构与小示例

1、float语法:

float : none | left |right

2、float参数值介绍:

float:none —— 对象不浮动

float:left —— 对象浮在左边

float:right —— 对象浮在右边

3、float值使用说明:

float属性的值指出了对象是否及如何浮动。

当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。

4、css float结构分析图

float属性分析图

5、float设置小示例:

.exp-a{ float: left }

.exp-b{ float: right }

float设置对象靠左(float:left)、靠右(float:right),在div css布局中相当重要

二、float小实例

这里CSS5使用float设置两个盒子一个靠左、一个靠右显示,为了观察到对象浮动靠左靠右效果,对其分别设置css 宽度、CSS 高度、CSS 边框。

1、完整HTML CSS代码

float属性 小实例 CSS5

.exp{ width:500px; border:1px solid #333; padding:10px; overflow:hidden}

.exp-a{ float:left; width:200px; height:100px; border:1px solid #F00}

.exp-b{ float:right; width:260px; height:120px; border:1px solid #00F}

float实例CSS代码解释:

.exp{ width:500px; border:1px solid #333; padding:10px; overflow:hidden}

为了观察到.exp对象里子级float靠左靠右浮动小DIV对象效果,设置了黑色边框、宽度500px;padding避免内部子级贴近父级DIV,因为.exp内子级设置float,所以设置overflow:hidden让.exp撑开。

感谢各位的阅读!关于“css浮动float怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


分享文章:css浮动float怎么用
分享路径:http://pwwzsj.com/article/pipeig.html