| |
|
|
| | Вот код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Shop</title>
<link rel="stylesheet" type="text/css" media="all" href="dump.css">
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
</body>
</html>
|
Вот css:
body {margin: 0px;}
#one {background: green; width: 30%; height: 300px; float: left;}
#two{background: orange; width: 30%; height: 100px;}
#three {background: green;}
#four{background: orange;}
|
Зелёный блок просто перекрывает оранжевый, хотя оранжевый должен находится справа. Почему так? | |
| |
|
|
| |
|
|
| |
для: dump
(21.02.2012 в 11:53)
| | | А вы местами блоки поменяйте
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Shop</title>
<link rel="stylesheet" type="text/css" media="all" href="dump.css">
</head>
<body>
<div id="two">
</div>
<div id="one">
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: cheops
(21.02.2012 в 12:27)
| | | А почему так? Ведь по логике первый вариант, должен работать... | |
| |
|
|
| |
|
|
| |
для: dump
(21.02.2012 в 16:17)
| | | Потому, что float-блок извлекается из потока, если хотите, чтобы работал первый вариант, нужно отменить обтекание при помощи clear. Вот CSS-стили для изначального порядка следования блоков.
body {margin: 0px;}
#one {background: green; width: 30%; height: 300px; float: left;}
#two{background: orange; width: 30%; height: 100px; clear: both;}
#three {background: green;}
#four{background: orange;}
|
| |
| |
|
|
| |
|
|
| |
для: cheops
(21.02.2012 в 16:36)
| | | >Потому, что float-блок извлекается из потока,
В смысле? Float только разрешает обтекание, значит следующий элемент должен обтечь его, а вместо этого он просто оказывается под ним. | |
| |
|
|
| |
|
|
| |
для: dump
(22.02.2012 в 13:39)
| | | Если "по логике" должно работать, а оно не работает, то, значит - проблемы как раз "с логикой".
Свойство стиля float объекта определяет - с какой стороны будет находиться объект, когда его вокруг что-то "обтекает".
Если у объекта установлено float == left, то сам объект будет находиться СЛЕВА от всего остального.
А при float ==right сам объект будет находиться СПРАВА от всего остального.
Запустите простейший код:
<div style="width: 100px; height: 100px; margin: 5px; background: lime"></div>
<div style="width: 100px; height: 100px; margin: 5px; background: aqua"></div>
<div style="width: 100px; height: 100px; margin: 5px; background: gray"></div>
<div style="width: 100px; height: 100px; margin: 5px; background: blue"></div>
|
А затем каждому из DIV'ов по-очереди задавайте float: left и смотрите. И думайте.
Потом задайте float: right каждому по очереди. И снова - смотрите и думайте.
Затем задавайте не по одному, а двум подряд, двум через один, трём подряд, всем четырём...
И думайте, думайте, думайте...
Мей би, поймёте ту самую "логику".
А когда вам покажется, что вы уже всё-всё поняли, начинайте задавать DIV'ам не только float, но и clear с разными его значениями: left, right, both... И снова - смотрите и думайте...
Очень интересное занятие, скажу я вам.
Через недельку станете специалистом. | |
| |
|
|
| |
|
|
| |
для: ЯСА
(22.02.2012 в 16:19)
| | | Я делал всё что вы сказали, но всё равно остались вопросы. Вот к примеру: 1) Насколько я понял, обтекать float-блок могут только строчные элементы, такие как текстовые строки, поля и т.д., а блочные элементы просто выводятся не обтекая float-блок? Почему так? 2)Если float-блок перекрывает блок из обычного вывода, то z-index не работает. float-блок всегда над основным потоком. Почему? | |
| |
|
|
| |
|
|
| |
для: dump
(26.02.2012 в 15:45)
| | | 1) Так потому, что это и есть свойство FLOAT, что означает "плавающий".
Есть некоторые блочные элементы. Одному из них приказали - "Плыви влево!" (установили float: left) - вот он и "плывёт" влево до ближайшего "берега" (предыдущего блочного элемента слева).
А все прочие блочные элементы этого "водоплавающего" как бы и не замечают. Ибо они - обитатели суши и плавать ("to float") не умеют.
-----
2) работает z-index.
Всегда работает - вне зависимости от использования или неиспользования свойства float.
Но только в том случае, если элементу кроме z-index установлено ещё и свойство position со значением либо == absolute, либо == relative.
Почитайте - http://msdn.microsoft.com/en-us/library/ms535167%28v=vs.85%29.aspx - второе предложение в разделе Remarks. | |
| |
|
|
| |
|
|
| |
для: ЯСА
(27.02.2012 в 00:13)
| | | Теперь более-менее понятен механизм работы float и clear. Но не понятна сама терминология: если float: left говорит о том, что блок будет "плавать" слева, то причём здесь "clear"? Если примеру, написать clear:left элемент опуститься вниз от плавающего блока. Назвали бы эти свойства лучше down или up...А то clear...И ещё: почему блочные элементы не могут обтекать float - элементы подобно строчным? И почему clear не работает для строчных? Вообще по-моему float и clear какие-то мутные свойства, не логичные...Возможно лучше использовать абсолютное позиционирование и таблицы? | |
| |
|
|
