建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > css教程 >

左浮动 css怎么写

时间:2019-08-01 14:28来源:PHP中文网 作者:猪哥 点击:
Css样式的float浮动属性,用于设置标签对象(如:div标签盒子、span标签、a标签、em标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。 float是什么意思? float是浮动,翻译成中文也是浮动意
Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。

 

float是什么意思?

float是浮动,翻译成中文也是浮动意思。

float的作用

通过css定义float(浮动)让div样式层块,向左或向右(靠)浮动。

Float常跟属性值left、right、none

Float:none 不使用浮动

Float:left 靠左浮动

Float:right 靠右浮动

float语法:

float : none | left |right

参数值:

none :  对象不浮动

left :  对象浮在左边

right :  对象浮在右边

案例:

我们设置一个盒子里,一个靠右、一个靠左浮动2个盒子,为了直观看到css浮动布局效果,我们对两个盒子设置一定宽度、高度和边框。

1、主要的html代码片段:

<div class="divcss5"> 
    <div class="divcss5_left">布局靠左浮动</div> 
    <div class="divcss5_right">布局靠右浮动</div> 
    <div class="clear"></div><!-- html注释:清除float产生浮动 --> 
</div>
2、css代码片段:
.divcss5{ width:400px;padding:10px;border:1px solid #F00} 
.divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px} 
.divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px} 
.clear{ clear:both}

(责任编辑:yang)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片