1.display属性
- 块级元素（block）：h1~h6、p、div、列表
- 内联元素（inline）：span、a、img、strong
| 值 | 说明 |
| ------ | ------------------------------------------------------------ |
| block | 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 |
| inline | 内联元素的默认值，元素会被显示为内联元素，该元素前后没有换行符 |
| inline | 行内块元素，元素既具有内联元素的特性，也具有块元素的特性 |
| none | 设置元素不会被显示 | - 块级元素与行级元三年的转变（block、inline）
- 控制块元素排到一行（inline-block）
- 控制元素的显示和隐藏（none）
那么可以使用什么属性使块元素排在一行呢?
(例如将这些手机元素排在一行)
- inline-block
- float
2.浮动（float）
解释：CSS 的 float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动？
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，浮动元素之后的元素将围绕它；浮动元素之前的元素将不会受到影响；如果图像是右浮动，下面的文本流将环绕在它左边。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动练习</title>
<style>
span
{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<p>
<span>这</span>是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>
显示效果如下图
float属性
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值，元素不浮动，并会显示在其文本中出现的位置 |
清除浮动，使用clear属性
例如img{clear：both;} 这段代码是清楚两侧浮动的意思
| 属性值 | 说明 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左、右两侧不允许浮动元素 |
| none | 默认值，允许浮动元素出现在两侧 |
3.inline-block和float的区别
-
display：inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE6、IE7上不支持 -
float
可以让元素排在一行，并且支持宽度和高度，可以决定排列方向
float浮动以后元素会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
