overflow: hidden у обтекающего элемента

@Hagrael · Регистрация: 07.01.2010

Студворк — интернет-сервис помощи студентам

Странно работает следующий код:

HTML5
1
2
<div class="float">LOL</div>
<div class="floating">LOL<br>LOL</div>

при следующих стилях:

CSS
1
2
3
4
5
6
.float {float: left;}
.floating {
overflow: hidden;
background: #479612;
margin: 9px;
}

Действовать margin начинает только с 9px. Мне вообще сказать по правде не до конца понятно, почему div с классом floating обрезается. Ведь overflow: hidden говорит лишь о том, что текст, выходящий за пределы блока следует скрыть и ничего более. Или я что-то путаю?

Добавлено через 6 часов 41 минуту
Так это баг или что? Но видел уже и в Mozil'e, и в Chrome'e, так что не похоже.

@Hurtsok · 20.09.2010, 03:57

overflow:hidden скрывает не только текст, он скрывает все что выходит за пределы блока. И в твоем случае все корректно происходит.

Добавлено через 5 минут
и у второго блока не указано его расположение по отношению к первому. Поэтому он предполагает что он находится под ним и прижат к левой части экрана и margin-left не работает.

Добавлено через 12 минут
Поэтому пока второй блок не опустится под первый он не сделает margin-left. Вот замени стили у второго блока на эти и убедись:

CSS
1
2
3
4
5
6
.floating {
overflow: hidden;
background: #479612;
margin-top:15px;
margin-left:10px;
}

@Hagrael · 20.09.2010, 13:02 **[ТС]**

Сообщение от Hurtsok

overflow:hidden скрывает не только текст, он скрывает все что выходит за пределы блока. И в твоем случае все корректно происходит.

Понял.

Сообщение от Hurtsok

и у второго блока не указано его расположение по отношению к первому. Поэтому он предполагает что он находится под ним и прижат к левой части экрана и margin-left не работает.

Этого я не понял. Указан ведь overflow: hidden, а float-то должен действовать. И как может быть margin-left причастно к margin-top... Не понял.

Добавлено через 16 секунд
Что даст margin-left: 10px; ?

Добавлено через 17 минут
Попробовал сделать overflow: hidden в IE. Так там div-контент всё равно залазил под меню! В чём дело? Как IE тогда воспринимает overflow???

@Hagrael · 22.09.2010, 11:45 **[ТС]**

Народ, никто не может объяснить почему IE так странно реагирует? И логику я всё-таки не понял

@lesha_firs · 22.09.2010, 12:05

Сообщение от Hagrael

Что даст margin-left: 10px;

отступ от левого края так как float:left все блоки не переносит в лево а прячет под собой!
тоесть попробуй сделать так чтоб понять до канца суть float

HTML5
1
2
3
4
5
6
7
<div  style="width:60px;border:5px solid #000;float:left">привет1<br />
<br />
<br />
<br />
<br />
</div>
<div  style="height:300px;border:15px solid #f00;">привет2</div>

и ты поймешь ка происходит оптикание и что тебе даст margin-left
Да и не забывай писать width иначе в ie криво смотреться будет

@Hagrael · 22.09.2010, 12:38 **[ТС]**

lesha_firs, в IE при установке высоты подкладка под div с float'ом не работает! Как этого избежать? Или width поможет это сделать? И ведь вы overflow: hidden не применяли.

@lesha_firs · 22.09.2010, 12:50

Я показал вам логику как работает float!
И че туту гадать скиньте скрин или схему того что вы хотите получить

@Hagrael · 22.09.2010, 13:15 **[ТС]**

lesha_firs, я хочу понять, почему при overflow: hidden у обтекающего элемента установка margin-top'a действует, только если margin-top больше 8px.

@Hagrael · 22.09.2010, 13:20 **[ТС]**

И ещё установить высоту у обтекающего элемента. Чтобы было вот так:
Название: whatiwant.png
Просмотров: 1556

Размер: 1.3 Кб

Но в IE если установить высоту, то обтекать снизу правый div не будет.

Vovan-VE · 22.09.2010, 15:44

Hagrael, doctype есть? Без него каждый браузер (IE в первую очередь) делает все по своим личным соображениям.

@Hagrael · 22.09.2010, 18:01 **[ТС]**

Vovan-VE, нет. Я вообще их не использую. Но понял, что стоит почитать про них. Но какой должен быть доктайп, чтобы всё ОК было?

Vovan-VE · 22.09.2010, 18:18

Имхо, xhtml 1.0 transitional или strict

HTML5
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

W3C: Рекомендуемые doctype'ы

@Hagrael · 23.09.2010, 13:59 **[ТС]**

Vovan-VE, попробую.

Добавлено через 17 часов 39 минут
Vovan-VE, хм...
На этот раз margin-top сработал адекватно, но margin-left работает так, будто слева элемента нет! Почему так? margin-top работает так, будто ширина элемента с overflow равна всей ширине родителя, но подкладки под float'ный элемент-то теперь нет! И ширина уменьшилась. Почему браузеры так реагируют?

Добавлено через 2 минуты
Вот здесь:
overflow: hidden у обтекающего элемента
мне сказали, что это из-за того, что браузер думает, что блок прижат к левой части экрана. Но ведь такого не должно быть - ширина (ещё раз повторю) меняется, всё на ура должно быть. margin-right у float'ного элемента работает! Странно так.

Добавлено через 28 минут
Vovan-VE, доктайп не помог, всё равно в IE отображается также =(
Как быть?

@Hagrael · 17.10.2010, 14:18 **[ТС]**

С этим-то разобрались, но как быть с главной проблемой?

@lesha_firs · 17.10.2010, 20:04

Сообщение от Hagrael

С этим-то разобрались, но как быть с главной проблемой?

что за проблема давно в курси событий небыл))??

@Hagrael · 17.10.2010, 20:15 **[ТС]**

lesha_firs,

Вот в чём она заключалась:
При overflow: hidden у обтекающего элемента элемент думал, что он переносится на новую строчку (как мне объяснили), и потому margin-top начинает действовать только если он больше 8px. Так ли это, и если да, почему браузер так думает?

@lesha_firs · 18.10.2010, 01:04

Hagrael, честно вы еще так намучеетесь с этим margin
у него много приколов! и браузеры иногда его не понимают))
именно поэтому мне пришлось от него отказаться! я сейчас пишу сайт и нанем я всего 2 раза использовал margin и то у незначительных ссылок!

@Hagrael · 18.10.2010, 14:26 **[ТС]**

lesha_firs, ну пока я только 2 прикола с margin'ом. Второй тут

А вы знаете, почему так?

@lesha_firs · 18.10.2010, 15:42

Чисто такая теория когда div уходит float left and right
через инспектор абектов смотрю у него height 9px на глаз)) и при задание больше не и даже дочерний div тянеться в низ родительский больше не становиться! может по этому!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	22.09.2010, 11:45 [ТС]
	Народ, никто не может объяснить почему IE так странно реагирует? И логику я всё-таки не понял 1

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	22.09.2010, 12:38 [ТС]
	lesha_firs, в IE при установке высоты подкладка под div с float'ом не работает! Как этого избежать? Или width поможет это сделать? И ведь вы overflow: hidden не применяли. 0

@lesha_firs 143 / 109 / 13 Регистрация: 13.02.2010 Сообщений: 522
	22.09.2010, 12:50
	Я показал вам логику как работает float! И че туту гадать скиньте скрин или схему того что вы хотите получить 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	22.09.2010, 13:15 [ТС]
	lesha_firs, я хочу понять, почему при overflow: hidden у обтекающего элемента установка margin-top'a действует, только если margin-top больше 8px. 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	22.09.2010, 13:20 [ТС]
	И ещё установить высоту у обтекающего элемента. Чтобы было вот так: Но в IE если установить высоту, то обтекать снизу правый div не будет. 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	22.09.2010, 15:44
	Hagrael, doctype есть? Без него каждый браузер (IE в первую очередь) делает все по своим личным соображениям. 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	22.09.2010, 18:01 [ТС]
	Vovan-VE, нет. Я вообще их не использую. Но понял, что стоит почитать про них. Но какой должен быть доктайп, чтобы всё ОК было? 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	23.09.2010, 13:59 [ТС]
	Vovan-VE, попробую. Добавлено через 17 часов 39 минут Vovan-VE, хм... На этот раз margin-top сработал адекватно, но margin-left работает так, будто слева элемента нет! Почему так? margin-top работает так, будто ширина элемента с overflow равна всей ширине родителя, но подкладки под float'ный элемент-то теперь нет! И ширина уменьшилась. Почему браузеры так реагируют? Добавлено через 2 минуты Вот здесь: overflow: hidden у обтекающего элемента мне сказали, что это из-за того, что браузер думает, что блок прижат к левой части экрана. Но ведь такого не должно быть - ширина (ещё раз повторю) меняется, всё на ура должно быть. margin-right у float'ного элемента работает! Странно так. Добавлено через 28 минут Vovan-VE, доктайп не помог, всё равно в IE отображается также =( Как быть? 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	17.10.2010, 14:18 [ТС]
	С этим-то разобрались, но как быть с главной проблемой? 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	17.10.2010, 20:15 [ТС]
	lesha_firs, Вот в чём она заключалась: При overflow: hidden у обтекающего элемента элемент думал, что он переносится на новую строчку (как мне объяснили), и потому margin-top начинает действовать только если он больше 8px. Так ли это, и если да, почему браузер так думает? 0

@lesha_firs 143 / 109 / 13 Регистрация: 13.02.2010 Сообщений: 522
	18.10.2010, 01:04
	Hagrael, честно вы еще так намучеетесь с этим margin у него много приколов! и браузеры иногда его не понимают)) именно поэтому мне пришлось от него отказаться! я сейчас пишу сайт и нанем я всего 2 раза использовал margin и то у незначительных ссылок! 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.10.2010, 14:26 [ТС]
	lesha_firs, ну пока я только 2 прикола с margin'ом. Второй тут А вы знаете, почему так? 0

@lesha_firs 143 / 109 / 13 Регистрация: 13.02.2010 Сообщений: 522
	18.10.2010, 15:42
	Чисто такая теория когда div уходит float left and right через инспектор абектов смотрю у него height 9px на глаз)) и при задание больше не и даже дочерний div тянеться в низ родительский больше не становиться! может по этому! 0