БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
1

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

19.09.2010, 17:19. Показов 6429. Ответов 18
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Странно работает следующий код:
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, так что не похоже.
0
19.09.2010, 17:19
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
19.09.2010, 17:19
Ответы с готовыми решениями:

Overflow: hidden
Ну, вот собственно, элементарный код: &lt;table width=&quot;50%&quot;&gt; &lt;tr&gt; &lt;td style=&quot;height: 50px; overflow: hidden;&quot;&gt; в чащах юга жил...

отменить overflow hidden
Доброго времени суток, требуется помощь, сломал голову уже, вот накидал образец существующей верстки &lt;body&gt; &lt;div&gt;...

CSS overflow hidden
проблема в том что на сайте siteкогда ставлю overflow hidden облака исчезают полностью а когда убираю есть прокрутка в права тс как...

18
bigMatherHacker
 Аватар для Hurtsok
112 / 81 / 12
Регистрация: 18.08.2010
Сообщений: 237
20.09.2010, 03:57 2
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;
}
1
БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
20.09.2010, 13:02  [ТС] 3
Цитата Сообщение от Hurtsok Посмотреть сообщение
overflow:hidden скрывает не только текст, он скрывает все что выходит за пределы блока. И в твоем случае все корректно происходит.
Понял.
Цитата Сообщение от Hurtsok Посмотреть сообщение
и у второго блока не указано его расположение по отношению к первому. Поэтому он предполагает что он находится под ним и прижат к левой части экрана и margin-left не работает.
Этого я не понял. Указан ведь overflow: hidden, а float-то должен действовать. И как может быть margin-left причастно к margin-top... Не понял.

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

Добавлено через 17 минут
Попробовал сделать overflow: hidden в IE. Так там div-контент всё равно залазил под меню! В чём дело? Как IE тогда воспринимает overflow???
0
БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
22.09.2010, 11:45  [ТС] 4
Народ, никто не может объяснить почему IE так странно реагирует? И логику я всё-таки не понял
1
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
22.09.2010, 12:05 5
Цитата Сообщение от 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 криво смотреться будет
0
БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
22.09.2010, 12:38  [ТС] 6
lesha_firs, в IE при установке высоты подкладка под div с float'ом не работает! Как этого избежать? Или width поможет это сделать? И ведь вы overflow: hidden не применяли.
0
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
22.09.2010, 12:50 7
Я показал вам логику как работает float!
И че туту гадать скиньте скрин или схему того что вы хотите получить
0
БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
22.09.2010, 13:15  [ТС] 8
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  [ТС] 9
И ещё установить высоту у обтекающего элемента. Чтобы было вот так:
Название: whatiwant.png
Просмотров: 1556

Размер: 1.3 Кб
Но в IE если установить высоту, то обтекать снизу правый div не будет.
0
 Аватар для Vovan-VE
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
22.09.2010, 15:44 10
Hagrael, doctype есть? Без него каждый браузер (IE в первую очередь) делает все по своим личным соображениям.
0
БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
22.09.2010, 18:01  [ТС] 11
Vovan-VE, нет. Я вообще их не использую. Но понял, что стоит почитать про них. Но какой должен быть доктайп, чтобы всё ОК было?
0
 Аватар для Vovan-VE
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
22.09.2010, 18:18 12
Имхо, 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'ы
1
БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
23.09.2010, 13:59  [ТС] 13
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  [ТС] 14
С этим-то разобрались, но как быть с главной проблемой?
0
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
17.10.2010, 20:04 15
Цитата Сообщение от Hagrael Посмотреть сообщение
С этим-то разобрались, но как быть с главной проблемой?
что за проблема давно в курси событий небыл))??
1
БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
17.10.2010, 20:15  [ТС] 16
lesha_firs, Вот в чём она заключалась:
При overflow: hidden у обтекающего элемента элемент думал, что он переносится на новую строчку (как мне объяснили), и потому margin-top начинает действовать только если он больше 8px. Так ли это, и если да, почему браузер так думает?
0
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
18.10.2010, 01:04 17
Hagrael, честно вы еще так намучеетесь с этим margin
у него много приколов! и браузеры иногда его не понимают))
именно поэтому мне пришлось от него отказаться! я сейчас пишу сайт и нанем я всего 2 раза использовал margin и то у незначительных ссылок!
0
БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
18.10.2010, 14:26  [ТС] 18
lesha_firs, ну пока я только 2 прикола с margin'ом. Второй тут А вы знаете, почему так?
0
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
18.10.2010, 15:42 19
Чисто такая теория когда div уходит float left and right
через инспектор абектов смотрю у него height 9px на глаз)) и при задание больше не и даже дочерний div тянеться в низ родительский больше не становиться! может по этому!
0
18.10.2010, 15:42
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
18.10.2010, 15:42
Помогаю со студенческими работами здесь

float + overflow:hidden
Доброго времени суток! Требуется научное объяснение следующей ситуации: когда дочерние элементы имеют свойство float:left, то...

Overflow:hidden и адаптивная верстка
Всем привет. У меня такая проблемка: 1) на сайте слайдер с инфою о автомобилях; 2) слайдер состоит из 3-х див блоков; 3) 1 блок...

Overflow: hidden и position: relative
Всем привет. Кто-то может мне объяснить проблему overflow: hidder и position: relative. Я делаю слайдер и когда я к родительскому элементу...

Вытянуть объект из overflow: hidden;
Ситуация такова: Есть слайдер, в нем кнопки переключения слайдов, лежат в корне блока, размеры блока заданы по высоте и стоит overflow....

Объясните действие overflow:hidden
Объясните как работает overflow. Столкнулся с проблемой, между навигацией (Тег &quot;nav&quot;) и слайдером появляется белая полоса, пытался...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему

Редактор формул (кликните на картинку в правом углу, чтобы закрыть)
Опции темы

Новые блоги и статьи
Почему могут не шифроваться русские символы в Java
Wired 17.02.2025
При разработке на Java нередко возникают сложности с шифрованием русских символов. Эта проблема особенно актуальна для разработчиков, создающих программное обеспечение для русскоязычной аудитории. . . .
Отличия ОС для x86_64 и ARM
Wired 17.02.2025
На данный момент сосуществуют две основные архитектуры процессоров - x86_64 и ARM. Эти архитектуры имеют принципиально разные подходы к организации вычислений и обработке данных, что накладывает. . .
Многопоточность в Python: как использовать Thread
bytestream 17.02.2025
Поток выполнения (thread) - это наименьшая последовательность инструкций, которая может управляться планировщиком операционной системы. Представьте себе, что ваша программа - это книга, а потоки -. . .
Как воспроизвести Race Condition в Python
bytestream 17.02.2025
В многопоточном программировании существует множество подводных камней, и одним из самых коварных является состояние гонки (Race Condition). Этот термин описывает ситуацию, когда результат выполнения. . .
Ошибка "node: --openssl-legacy-provider is not allowed in NODE_OPTIONS"
bytestream 17.02.2025
Каждый разработчик рано или поздно сталкивается с ситуацией, когда при запуске проекта Node. js неожиданно выскакивает ошибка "node: --openssl-legacy-provider is not allowed in NODE_OPTIONS". Это. . .
Ошибка pip Python "AttributeError­: module 'lib' has no attribute 'OpenSSL_add_al­l_algorit­hms'"
bytestream 17.02.2025
При разработке на Python частенько сталкиваешься с разными сюрпризами, но ошибка AttributeError: module 'lib' has no attribute 'OpenSSL_add_all_algorithms' - это что-то особенное. Знаете, это как. . .
Сообщение Play Store "You must complete the advertising ID declaration before you can release an app that targets"
bytestream 17.02.2025
Рекламный идентификатор - это уникальный, но восстанавливаемый строковый идентификатор для каждого устройства Android. Думаю, вы удивитесь, но даже если ваше приложение не показывает рекламу. . .
Отличия App Router от Pages Router в Next.js
bytestream 17.02.2025
Next. js прошел длинный путь развития, и одним из самых значительных изменений стало появление App Router - революционного подхода к организации маршрутизации в приложении. Этот новый способ пришел на. . .
Топ10 лучших фреймворков JavaScript для изучения в 2025
bytestream 16.02.2025
В современной веб-разработке JavaScript занимает особое место, являясь одним из наиболее востребованных языков программирования. По мере развития веб-технологий появляется все больше фреймворков,. . .
Temporal в JavaScript - новый формат даты и времени
bytestream 16.02.2025
В мире JavaScript скоро произойдет значимое событие - появление нового встроенного объекта Temporal, который призван полностью заменить устаревший объект Date. Это революционное изменение в работе с. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru