您的位置:首页 > HTML入门 >

 

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

 

css float:left 浮动靠左布局

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

一、float left语法

1、float:left使用示范代码

div{float:left} 

设置div布局靠左。

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

二、css float left实例

1、float:left使用示例代码

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float left实例 ThinkCSS</title>
<style>
div{ border:1px solid #F00}
.exp{ float:left; border:1px solid #00F;height:100px}
</style>
</head>
<body>
<div>未设置float样式</div>
<div>未设置float样式</div>
<div class="exp">我被设置靠左</div>
<div class="exp">我被设置靠左</div>
</body>
</html>

2、float:left实例效果截图

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

三、float:left应用场景

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

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

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

标签(Tag): 靠左 float left
本文分享URL地址:http://www.css5.com.cn/html/1068.html

更多

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2016-09-07     点击:
原创:CSS5     来源网址:http://www.css5.com.cn/html/1068.html
本文www.css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!