登录 | 注册

float:left css浮动靠左 布局靠左

首页 > Web前端 > Web标准 2016-11-14 18:30:08 浏览次 共 条评论

收藏赞(分享

css float:left 浮动靠左布局

首先 float 是布局网页浮动(对象靠左left、靠右right)样式属性单词。在布局中我们要让对象靠左显示只需要对对象设置float:left样式即可。

一、float left语法

1、float:left使用示范代码

  1. div{float:left} 

设置div布局靠左。

2、float:left解释
float:left是设置对象靠左(浮动靠左)排版。无论 div 、 p 、 span 、h1、li等标签均可设置而且完美兼容。平时 css div 布局中常见左中右、左右等更复杂排版均需要float:left样式来布局。

二、css float left实例

1、float:left使用示例代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>float left实例  </title> 
  6. <style> 
  7. div{ border:1px solid #F00} 
  8. .exp{ float:left; border:1px solid #00F;height:100px} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div>未设置float样式</div> 
  13. <div>未设置float样式</div> 
  14. <div class="exp">我被设置靠左</div> 
  15. <div class="exp">我被设置靠左</div> 
  16. </body> 
  17. </html> 

2、float:left实例效果截图

div css之float:left实例效果截图
div css之float:left实例效果截图

三、float:left应用场景

在实际 div+css 布局中常见左右布局,左中右结构布局时会用到float left样式,一般靠左 和靠中的div我们均会设置float:left达到并排靠左显示。

在
网站logo和搜索框均设置靠左float left来布局
在 网站logo和搜索框均设置靠左float left来布局


网站css float left使用说明图
网站 css float left使用说明图

免责声明:本文来源于,由网友提供或网络搜集,仅供个人研究、交流学习使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。优知网会定期发布Web前端相关趋势文章,包括 Web标准 HTML5 CSS JS JQuery Ajax 网页特效 等领域,敬请关注!

分享到
人收藏5 收藏
 
我要评价
 
 

咨询中心

优就业微信扫一扫
微信扫一扫

400-650-7353

加入官方微博