Float и Clear

Мы можем использовать float с любым элементом, который не был абсолютно спозиционирован. Это применяется для определения должен ли элемент переместиться влево, направо или не должен совсем. Вот список возможных значений:

  • left

  • right

  • none


Если элемент перемещается влево (float:left), он выравнивается по левой стороне содержащего элемента, а весь последующий контент выравнивается по правой стороне (до тех пор пока не достигнет нижней границы элемента).

Если элемент перемещается вправо, он выравнивается по правой стороне, а весь последующий контент будет выровнен по левой стороне (до тех пор пока не достигнет нижней границы элемента).

В случае, если ширина последующего контента зафиксирована, он не будет переноситься ниже выровненного float’ом div’а. Вместо этого он применит свою ширину.

Пример кода

01

<html>

 

02

<head>

 

03

<title>CSS Float</title>

 

04

</head>

 

05

<body>

 

06

<h1 style="text-align:center">CSS Float</h1>

 

07

 

 

08

<div style="float:left">

 

09

<h2>Float Left</h2>

 

10

<div style="width:100px; border: 2px solid black">

 

11

<img src="Images/block.gif" height="50"

 

12

width="50" style="float:left" />

 

13

This is just text. This is just text. This is just text.

 

14

</div>

 

15

<h2>Float Left - Div</h2>

 

16

<div style="width:100px; height:180px; border: 2px solid black">

 

17

<div style="float:left;">

 

18

<img src="Images/block.gif" height="50" width="50" />

 

19

</div>

 

20

<div style="width:40px; float:left;">

 

21

This is just text. This is just text. This is just text.

 

22

</div>

 

23

</div>

 

24

</div>

 

25

 

 

26

<div style="float:right">

 

27

<h2>Float Right</h2>

 

28

<div style="width:100px; border: 2px solid black">

 

29

<img src="Images/block.gif" height="50"

 

30

width="50" style="float:right" />

 

31

This is just text. This is just text. This is just text.

 

32

</div>

 

33

<h2>Float Right - Div</h2>

 

34

<div style="width:100px; height:180px; border: 2px solid black">

 

35

<div style="float:right">

 

36

<img src="Images/block.gif" height="50" width="50" />

 

37

</div>

 

38

<div style="width:40px;">

 

39

This is just text. This is just text. This is just text.

 

40

</div>

 

41

</div>

 

42

</div>

 

43

</body>

 

44

</html>

Clear

Мы можем использовать свойство clear для определения, должен ли контент, который «обтекает» float-блок, быть сброшен вниз. Вот список возможных значений:

  • left – не допускает обтекание «floated» объекта слева

  • right – запрещает обтекание элемента справа

  • both – запрещает обтекание объекта с обеих сторон, т.е. и слева, и справа

  • none – разрешено обтекание

Пример кода:

01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

02

<html xmlns="http://www.w3.org/1999/xhtml">

 

03

<head>

 

04

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

05

<style type="text/css">

 

06

#wrapper

 

07

position:absolute;

 

08

left:50%;

 

09

top:30px;

 

10

width: 450px;

 

11

margin-left:-225px;

 

12

 

13

 

 

14

.box

 

15

border: 2px solid #f00;

 

16

background-color:#000066;

 

17

color:#f90;

 

18

text-align:center;

 

19

font-size:100px;

 

20

font-weight:bold;

 

21

font-family:Arial, Helvetica, sans-serif;

 

22

 

23

 

 

24

#box2

 

25

top:10px;

 

26

left:10px;

 

27

height:200px;

 

28

width:200px;

 

29

margin-bottom:15px;

 

30

 

31

 

 

32

#box1

 

33

float:right;

 

34

height:400px;

 

35

width:200px;

 

36

margin-bottom:15px;

 

37

 

38

 

 

39

#box3

 

40

height:100px;

 

41

width:100%;

 

42

clear:both;

 

43

 

44

</style>

 

45

<title>Positioning Boxes</title>

 

46

</head>

 

47

 

 

48

<body>

 

49

<div id="wrapper">

 

50

<div id="box1" class="box">1</div>

 

51

<div id="box2" class="box">2</div>

 

52

<div id="box3" class="box">3</div>

 

53

</div>

 

54

</body>

 

55

</html>

Пример кода:

view s

print

?

01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

02

<html xmlns="http://www.w3.org/1999/xhtml">

 

03

<head>

 

04

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

05

<style type="text/css">

 

06

#wrapper

 

07

width:800px;

 

08

 

09

 

 

10

#insideWrapper

 

11

width:612px;

 

12

position:relative;

 

13

left:50%;

 

14

margin-left:-311px;

 

15

 

16

 

 

17

.box

 

18

border: 2px solid #f60;

 

19

background-color:#006;

 

20

color:#f90;

 

21

text-align:center;

 

22

font-size:100px;

 

23

font-weight:bold;

 

24

font-family:Arial, Helvetica, sans-serif;

 

25

 

26

 

 

27

#box1

 

28

float:left;

 

29

top:10px;

 

30

left:10px;

 

31

height:300px;

 

32

width:200px;

 

33

 

34

 

 

35

#box2

 

36

float:left;

 

37

height:400px;

 

38

width:200px;

 

39

 

40

 

 

41

#box3

 

42

float:left;

 

43

height:300px;

 

44

width:200px;

 

45

 

46

 

 

47

#divClear

 

48

height:50px;

 

49

clear:both;

 

50

border:4px solid #000;

 

51

background-color:#f00;

 

52

 

53

 

 

54

#divTop

 

55

height:50px;

 

56

border:4px solid #000;

 

57

background-color:#00f;

 

58

 

59

</style>

 

60

<title>Positioning Boxes</title>

 

61

</head>

 

62

 

 

63

<body>

 

64

<div id="wrapper">

 

65

<div id="divTop" style=""></div>

 

66

<div id="insideWrapper">

 

67

<div id="box1" class="box">1</div>

 

68

<div id="box2" class="box">2</div>

 

69

<div id="box3" class="box">3</div>

 

70

</div>

 

71

<div id="divClear" style="background:red"></div>

 

72

</div>

 

73

</body>

 

74

</html>