float 属性理解

首先,必须知道两件事:
1.       浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的.
2.       HTML中的所有对象几乎都默认分为两种: block对象和in-line对象. 其中, block默认的显示状态是占据整行; in-line对象则相反,允许其他对象与它在一行中显示.
 
现在来看float属性, 它的作用就是改变block对象的默认显示方式. block对象设置了float属性之后,它将不再独自占据一行.
 
具体可以参悟下面这个实例:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.left
{
       background-color:#cccccc;
       border:2px solid #333333;
       width:200px;
       height:100px;
}
.leftfloat
{
       background-color:#cccccc;
       border:2px solid #333333;
       width:200px;
       height:100px;
       float:left;
}
.right
{
       background-color:#cccccc;
       border:2px solid #333333;
       height:100px;
}
</style>
</HEAD>
 
<BODY>
<div class="left">div left float:none</div>
<div class="right">div right</div>
 
<div class="leftfloat">div left float:left</div>
<div class="right">div right</div>
 
<span class="left">span left float:none</span>
<span class="right">span right</span>
</BODY>
</HTML>
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值