<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Частичная отмена float в CSS

Частичная отмена float в CSS

В этой статье я решил разобрать одну проблему, которая иногда встречается при вёрстке, и при этом в Интернете найти её решение очень трудно. В этой статье мы разберём проблему частичной отмены float в CSS, а так же я Вам покажу её решение.

Итак, давайте разберём вот такой код:

<div id="left">Левые блоки</div>
<div id="right">
  <img src="images/img.jpg" alt="" />
  <p>Текст статьи</p>
  <div style="clear: both;"></div>
  <p>Автор: Иван Иванов; Раздел: CSS</p>
</div>

И CSS-код:

#left {
  border-right: 5px solid #000;
  float: left;
  height: 400px;
  width: 200px;
}
#right {
  margin-left: 220px;
}
#right img {
  float: left;
}

Какая была наша задача? Сделать 2 колонки: в левой колонке есть какой-то контент, в правой колонке есть статья. И у этой статьи есть картинка с float: left; (как и у левого блока). Затем мы хотим вывести блок с информацией о статье, безусловно, мы не хотим, чтобы эта информация была справа от картинки. Поэтому добавляем clear-блок. Однако, тут нас ждёт сюрприз.

Отменилось не только float: left; у картинки, но и у левого блока. Таким образом, информация о статье ушла вниз, поравнявшись с нижней границей левого блока (поскольку он выше). Как решить эту проблему? Очень просто, достаточно в блок #right добавить свойство overflow:

#right {
  margin-left: 220px;
  overflow: hidden;
}

Теперь всё встало на свои места. Свойство overflow отвечает за отображение того, что находится за пределами блока. И hidden сообщает, что будет отображаться лишь то, что находится внутри блока, а всё остальное будет скрыто. Именно это свойство и значение позволяет нам решить проблему с частичной отменой float в CSS.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (6):

mike124 mike124 18.02.2014 22:05:02

Пример неудачный - у меня что с overflow: hidden;, что без оного отображается нормально. Пробовал в IE9, Опера, FF и Хром.

Ответить

rysich rysich 19.02.2014 01:32:06

Кажется это материал из разряда "хак". Overflow это отображение внутреннего контента, а float это обтекание и позиционирование, и они вообще никак не связаны между собой. Чтобы нормально отображались колонки, нужно верстать нормальный многоколоночный макет, хотя бы так как у Мержевича: http://htmlbook.ru/layout А не заниматься сомнительными хаками.

Ответить

sinkill sinkill 19.02.2014 01:53:22

где ты здесь вообще хаки увидел? :D

Ответить

Maks4ever Maks4ever 02.01.2015 18:27:02

не очень понятно как это сработало может действительно для подписи к картинке стоило добавить отдельный блок

Ответить

Tanya1 Tanya1 05.01.2015 17:02:10

Михаил, если сможете подскажите:если читать описание значения "hidden": "Отображается только область внутри элемента, остальное будет скрыто".Но в нашем случае как раз нет границы элемента, за которой все должно быть скрыто.И содержимое как раз не скрывается при "hidden", а подтягивается.Значит перевод спецификации не полный, не описываются все особенности свойства?

Ответить

aio350 aio350 08.01.2019 11:00:12

можно сделать проще <div id="right"> <img src="images/img.jpg" alt="" /> <p>Текст статьи</p> </div> <p style="position: absolute; top: 400px; left: 225px;">Автор: Иван Иванов; Раздел: CSS</p>

Ответить

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