html中float,left,text-align,align怎么用？

float，text-align是css样式。

1.float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

实例：

把图像向右浮动：

img

{

float:right

}

2.left

left是属性值，float:left, text-align:left align:left 都是不同的

3.text-align

text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

实例

设置 h1、h2、h3 元素的文本对齐方式：

h1 {text-align:center}

h2 {text-align:left}

h3 {text-align:right}

4.align

align 属性规定 元素中的内容的水平对齐方式。

实例

下面的 HTML 表格将 tbody 元素中的内容向右对齐：

<table border="1" width="100%">

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tbody align="right">

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$80</td>

</tr>

</tbody>

</table>

float 是浮动的意思。

使用float 意思就是网页不再是一个平面的，而是一个有上下层次的网页，只不过从屏幕上看相当于俯视去看一个网页，看出来的效果仍然是一个平面，但是侧视图去看的话就变成了上下层的结构，这样才会出现不同的div在不同的平面上，所以在你俯视去看的时候，他们可以并在一起，感觉上是一个平面，其实是两个平面。

不知道你能不能懂

方法/步骤

1

首先，header,nav,article,section,aside,footer这些html5的标签本质上和div没有任何区别，他们的实质性作用就是让你的html代码有语义。也就是说，仅仅在html使用它们并不会显示出他们语义中包含的意思。还需要针对每一个标签编写相应的css。接下来，我将以下图为例，写一个样例

2

先写出它的大概框架。注意了，因为article section之类的仅仅是语义上的区别，其实怎么写都行。

3

然后添加一些内容，让页面显得饱满些，随便加一些就行，内容不重要。

4

直接在页面打开，它看上去是这样的。

5

接下来就是用css来让它看上去健康些，先定义header 和 nav以及body。效果如图

body

{

margin: 0 auto

width: 900px

background: #fff

font: 100%/1.4 helvetica, arial, sans-serif

}

header

{

background: #ccc

padding: 20px

}

header h1 { margin: 0}

nav

{

float: left

width: 900px

background: #333

}

nav ul

{

margin: 0

padding: 0

}

nav ul li

{

list-style-type: none

display: inline

}

nav li a

{

display: block

float: left

padding: 5px 10px

color: #fff

text-decoration: none

border-right: 1px solid #fff

}

6

下面是对article 和 footer的定义，完成这些之后就能看到一个还不错的页面了

article

{

clear: left

float: left

width: 560px

padding: 20px 0

margin: 0 0 0 30px

display: inline

}

article h2 { margin: 0}

aside

{

float: right

width: 240px

padding: 20px 0

margin: 0 20px 0 0

display: inline

}

aside h3 { margin: 0}

footer

{

clear: both

background: #ccc

text-align: right

padding: 20px

height: 1%

}

---