Странное поведение float элемента / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Странное поведение float элемента

18 сообщений из 18, страница 1 из 1

Странное поведение float элемента

#38637653

welter

Гость

Почему float -элемент смещается вниз вместе с блочным элементом, который следует за ним и не является его родителем?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Float и display:block</title>
<style type="text/css">
#left{
background:#cfc;
width:200px;
height:200px;
margin:0px;
float:left;
border:solid 2px red;
}
#content{
background:#ccf;
/*margin-left:220px;*/
margin-top:100px;
border:2px solid green;
}
</style>
</head>
<body>
<div id="left">Плавающий элемент</div>
<div id="content">
text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>
text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>
</div>
</body>
</html>

...

Рейтинг:

0 / 0

10.05.2014, 12:47

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38637661

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

welter,

Выравнивание DIV свойством float

...

Рейтинг:

0 / 0

10.05.2014, 13:06

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38637665

welter

Гость

user89,
эта ссылка не о том :-)
вопрос был следующий:
изменяю смещение margin-top:100px элемента div(float:none), идущего в нормальном потоке следом ЗА float-элементом(float:left), float элемент позиционируется по верхнему краю этого блока - почему?
Казалось бы, если float-элемент выпадает из потока, то он не должен зависеть от смещения блока, идущего за ним..,?

...

Рейтинг:

0 / 0

10.05.2014, 13:17

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38637672

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

welterэта ссылка не о том :-)Как раз о том
welterизменяю смещение margin-top:100px элемента div(float:none)float:none - не существует. Надо как в статье - clear:both;

попробуйте так

Код: 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.

<!doctype html>
<html>
<head> <meta charset="utf-8"> <title>Float и display:block</title>
<style type="text/css">
#left{
 background:#cfc;
 width:200px;
 height:200px; 
 margin:0px;
 float:left;
 border:solid 2px red;
}
#content{
 background:#ccf;
 /*margin-left:220px;*/
 margin-top:100px;
 border:2px solid green;
 clear:both;
}
</style>
</head>
<body>
 <div id="left">Плавающий элемент</div>
 <div id="content">
 text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>
 text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>
 </div> 
</body>
</html>

...

Рейтинг:

0 / 0

10.05.2014, 13:51

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38637675

welter

Гость

user89,
1.float:none - это состояние элемента по-умолчанию в нормальном потоке
2.Вопрос был, почему так происходит, как описано выше, а не убрать обтекание....
Есть ли у кого объяснение такого поведения элемента?

...

Рейтинг:

0 / 0

10.05.2014, 14:00

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38637915

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

welterпочему так происходит, как описано выше, а не убрать обтекание....
Есть ли у кого объяснение такого поведения элемента?
У плавающих элементов свое представление об их плавании...
Вот таким образом он пытается подстроить свой внутренний контент под контент родителя (body).

...

Рейтинг:

0 / 0

11.05.2014, 11:18

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38637940

Програмёр

Участник

Откуда: Москва

Сообщения: 2 987

Рейтинг: 0 / 0

welteruser89,
1.float:none - это состояние элемента по-умолчанию в нормальном потоке
2.Вопрос был, почему так происходит, как описано выше, а не убрать обтекание....
Есть ли у кого объяснение такого поведения элемента?

Дело не в float, а в margin.

Почитай про второе... там есть такая особенность, что margin потомка, чья граница совпадает с границей родителя, сдвигает не потомка, а именно родителя. Потому получается тот эффект, который был описан (сдвинулся body, а потому и все вложенные в него элементы).
если перед float элементом вставить div без смещения, то ситуация исправится :)

Код: html

1.
2.
3.

<div style="height: 1px"></div>
<div style="float: left; background: yellow">123</div>
<div style="margin-top: 50px">234</div>

...

Рейтинг:

0 / 0

11.05.2014, 13:14

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638026

welter

Гость

[quot Програмёр]welteruser89,
Дело не в float, а в margin.

Почитай про второе... там есть такая особенность, что margin потомка, чья граница совпадает с границей родителя, сдвигает не потомка, а именно родителя. Потому получается тот эффект, который был описан (сдвинулся body, а потому и все вложенные в него элементы).

[/src]
OK
только не понятно, почему body сдвинулся?
1.если убрать float элемент, то body не сдвигается,
а если первым идет float, то сдвигается....
2.Если добавить
body{
border:1px solid;
} перестает сдвигаться... что за правила такие, это где это в стандарте про них написано?!
Дайте ссыдку!!! :-)

...

Рейтинг:

0 / 0

11.05.2014, 17:17

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638122

Програмёр

Участник

Откуда: Москва

Сообщения: 2 987

Рейтинг: 0 / 0

[quot welter]Програмёрпропущено...

OK
только не понятно, почему body сдвинулся?
1.если убрать float элемент, то body не сдвигается,
а если первым идет float, то сдвигается....
2.Если добавить
body{
border:1px solid;
} перестает сдвигаться... что за правила такие, это где это в стандарте про них написано?!
Дайте ссыдку!!! :-)

тут

...

Рейтинг:

0 / 0

11.05.2014, 20:53

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638137

welter

Гость

Програмёр,
спасибо,
пока не понял, что это ТУТ (причем здесь margin-collapse по-вертикале?),
но посмотрю по-внимательнее.... :-)

...

Рейтинг:

0 / 0

11.05.2014, 21:16

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638185

Програмёр

Участник

Откуда: Москва

Сообщения: 2 987

Рейтинг: 0 / 0

welterПрограмёр,
спасибо,
пока не понял, что это ТУТ (причем здесь margin-collapse по-вертикале?),
но посмотрю по-внимательнее.... :-)

Так это именно оно и есть ) Отступы схлопываются не только между соседними элементами, но и между потомком и родителем. Отступ потомка схлопывается с отступом родителя.

...

Рейтинг:

0 / 0

11.05.2014, 22:52

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638473

Програмёр

Участник

Откуда: Москва

Сообщения: 2 987

Рейтинг: 0 / 0

welter1.если убрать float элемент, то body не сдвигается,
а если первым идет float, то сдвигается....

утверждение неверное кстати (что бы никто не ввёлся в заблуждение :) ).
Просто на body проверить сложно, так как его заливка идёт от начала документа в любом случае (что-то в документации там было об особенном поведении элементов верхнего уровня, видимо об этом, нету времени разобраться), но для проверки поместим наши блоки в другой div:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<style>
body > div{
    background: red;
}
</style>
<div>
    <div style="height: 1px"></div>
    <div style="float: left; background: yellow">123</div>
    <div style="margin-top: 50px">234</div>
</div>

Как и предсказывалось, тут ничего не сместилось

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.

<style>
body > div{
    background: red;
}
</style>
<div>
    <div style="float: left; background: yellow">123</div>
    <div style="margin-top: 50px">234</div>
</div>

теперь видно что внешний div начинается со смещением в 50px сверху

Код: html

1.
2.
3.
4.
5.
6.
7.
8.

<style>
body > div{
    background: red;
}
</style>
<div>
    <div style="margin-top: 50px">234</div>
</div>

относительно прошлого примера всё осталось неизменным, только пропал блок со флоатом, но смещение внешнего div осталось равно 50px.

...

Рейтинг:

0 / 0

12.05.2014, 11:13

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638577

welter

Гость

Програмёр,
body никуда не смещается, добавьте для чистоты эксперимента:
html,body{
background:red;
height:100%;
margin:0;
}
в первоначальный скрипт...

ответа все-таки нет...
вопрос остался:П О Ч Е М У ?

...

Рейтинг:

0 / 0

12.05.2014, 12:21

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638676

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

welterответа все-таки нет...
вопрос остался:П О Ч Е М У ?
krvsaУ плавающих элементов свое представление об их плавании...
Вот таким образом он пытается подстроить свой внутренний контент под контент родителя (body).
Это одно из требований к плавающим элементам...

...

Рейтинг:

0 / 0

12.05.2014, 13:23

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638703

Програмёр

Участник

Откуда: Москва

Сообщения: 2 987

Рейтинг: 0 / 0

welterПрограмёр,
body никуда не смещается, добавьте для чистоты эксперимента:
html,body{
background:red;
height:100%;
margin:0;
}
в первоначальный скрипт...

ответа все-таки нет...
вопрос остался:П О Ч Е М У ?

Читаем спецификацию. Если что-то не соответствует поведению - тогда можно обсуждать и думать как решить. Пока несоответствий не вижу :)

что-то эксперимент грязный получается... мы зачем-то к html полезли... зачем? его то как-раз трогать и не надо для чистоты... разве только всем padding и margin нулевой выставить (хотя насколько помню у html они как-раз таки нулевые)

вот чистый эксперимент:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

body{
    /*margin-top: 10px;*/
    /*margin-top: 100px;*/
    position: relative;
}
.abs{
    position: absolute;
    left:200px;
    top:0px;
    background: blue;
}
<div style="margin-top: 50px; background: red">234</div>
<div class="abs">absolute</div>

как видим (если по очереди раскоментить margin-top), body смещается на margin div'а, если собственный margin меньше, или же на собственный, если он больше. При этом верхний край div совпадает с верхним краем body (разумеется и верхним краем div.abs)

...

Рейтинг:

0 / 0

12.05.2014, 13:42

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638781

welter

Гость

Програмёр,
еще раз...
1.html из style можно убрать, ни на что не влияет в данном примере
2.я задаю конкрентный вопрос (или пытаюсь его задать :-) по конкретному скрипту (поведение float-элемента).....
кто-нибудь может объяснить, почему так работает?

...

Рейтинг:

0 / 0

12.05.2014, 14:25

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638794

Програмёр

Участник

Откуда: Москва

Сообщения: 2 987

Рейтинг: 0 / 0

welterПрограмёр,
еще раз...
1.html из style можно убрать, ни на что не влияет в данном примере
2.я задаю конкрентный вопрос (или пытаюсь его задать :-) по конкретному скрипту (поведение float-элемента).....
кто-нибудь может объяснить, почему так работает?

Так float элемент ведёт себя нормально :) Мы же уже сошлись на том, что float-элемент (как и position: absolute) смещается из-за смещения родителя.

Может потому мы не понимаем друг-друга? то есть дело не в float... Обсуждать и объяснять надо поведение блочного элемента в margin, а не с float :)

Ладно, я пока помолчу... может кто другой зайдёт в тему и решит пояснить поведение.

...

Рейтинг:

0 / 0

12.05.2014, 14:33

| Ответить | Цитировать | Написать

Странное поведение float элемента

#38638799

welter

Гость

[quot Програмёр]welterПрограмёр,
Так float элемент ведёт себя нормально :) Мы же уже сошлись на том, что float-элемент (как и position: absolute) смещается из-за смещения родителя.

Как раз и не сошлись....
OK, подождем, может будут еще какие-нибудь мысли... :-)

...

Рейтинг:

0 / 0

12.05.2014, 14:40

| Ответить | Цитировать | Написать

18 сообщений из 18, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Странное поведение float элемента

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&msg=38637672&tid=1447098]:	0ms
get settings:	8ms
get forum list:	23ms
check forum access:	3ms
check topic access:	3ms
track hit:	150ms
get topic data:	9ms
get forum data:	2ms
get page messages:	57ms
get tp. blocked users:	1ms
others:	209ms

total:	465ms

	Необходимые cookie
	Cookie для сбора статистики
	Cookie для маркетинга и рекламы