CSS手册CSS3手册Edu人民币大写转换网闻
欢迎来到thinkcss查找CSS资料与学习DIV CSS布局技术!
您的位置:ThinkCSS首页 > HTML入门 >

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

css float:left 浮动靠左布局

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

一、float left语法   -   TOP

1、float:left使用示范代码

  1. div{float:left} 

设置div布局靠左。

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

二、css float left实例   -   TOP

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实例 ThinkCSS</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实例效果截图

三、float:left应用场景   -   TOP

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


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


ThinkCSS网站css float left使用说明图

如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/html/h1068.shtml

CSS教程文章修订日期:2016-09-07 10:12 www.thinkcss.com css。

我要分享到:

相关文章 Related articles