一、浮动
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
inherit 从父级继承浮动属性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
#fd{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#sd{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#td{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#container{
width: 400px;
height: 500px;
background-color: darkgray;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>浮动</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
>
</
head
>
<
body
>
<
div
id
=
"container"
>
<
div
id
=
"fd"
></
div
>
<
div
id
=
"sd"
></
div
>
<
div
id
=
"td"
></
div
>
</
div
>
</
body
>
</
html
>
|
二、clear属性
去掉浮动属性（包括继承来的属性）
left、right 去掉元素向左、向右浮动
both 左右两侧均去掉浮动
inherit 从父级继承来clear的值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>浮动</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
>
</
head
>
<
body
>
<
div
id
=
"container"
>
<
div
id
=
"fd"
></
div
>
<
div
id
=
"sd"
></
div
>
<
div
id
=
"td"
></
div
>
<
div
id
=
"text"
>HelloWorld!</
div
>
</
div
>
</
body
>
</
html
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
#fd{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#sd{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#td{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#container{
width: 280px;
height: 500px;
background-color: darkgray;
}
#text{
clear: left;
}
|
本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1772841
