<ul> сворачивается в ноль

@LFC · Регистрация: 17.09.2015

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

Почему border-bottom в ul.nav отображается вровень с border-top элементов списка?Ведь контейнер должен соответствовать по высоте своему наполнению,если не задано иное в стилях.А тут получается что список свернулся в ноль,а его элементы вылезли за его границы.

HTML5
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
30
31
32
33
34
35
36
37
38
<html>
<head>
    <meta charset="utf-8" />
    <title>Горизонтальная панель навигации float</title>
    <style>
        a {
            text-decoration: none;
            display: block;
        }
        ul.nav {
            list-style-type: none;
            padding-left: 0;
            margin: 0;
            border-bottom: 1px dashed #000;
        }
        .nav li {
            width: 100px;
            float: left;
            border: 1px dashed #000;
            border-bottom: none;
            padding: 5px;
            background-color: #eaeaea;
            text-decoration: none;
            text-align: center;
            color: #333;
            margin-right: -5px;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">Click1</a></li>
        <li><a href="#">Click2</a></li>
        <li><a href="#">Click3</a></li>
        <li><a href="#">Click4</a></li>
    </ul>
</body>
</html>

PS Я убрал у элементов нижнюю границу,чтобы при уменьшении экрана,когда они встанут столбиком,границы между ними не утолщались,а границу самого нижнего элемента изображала бы граница списка.

@Kumiko · 22.02.2017, 08:46

Потому-что св-во float вытесняет элемент из обычного потока.
Надеюсь помог)

@LFC · 22.02.2017, 08:47 **[ТС]**

Добавил в ul.nav

CSS
1
overflow: hidden;

-помогло.Но,честно говоря,не понял почему.

@Fourd · 22.02.2017, 11:11

LFC, у вас элементы li имеют свойство float, тем самым ul получает высоту 0, задав overflow: hidden решаете проблему

@aj17 · 22.02.2017, 17:05

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

-помогло.Но,честно говоря,не понял почему.

при использовании float элементов, у блока родителя схлопывается высота. Свойство overflow: hidden; заставляет блок с нулевой высотой правильно воспринимать плавающие элементы (float) так как оно создано для того, что бы четко показывать контент внутри себя, поэтому происходит просчет высоты и определение зоны видимости.

Добавлено через 2 минуты
от себя хочу добавить что это худший способ из всех возможных скорректировать cхлопнутый блок. Используйте для этих целей всем известный хак clearfix.

@LFC · 22.02.2017, 18:06 **[ТС]**

aj17, Благодарю.С технической стороны всё более-менее понятно.Остался философский вопрос: почему браузер схлопывает родительский контейнер,ведь свойство float воздействует на последующие элементы? Где можно доки покурить по этому вопросу?

@aj17 · 22.02.2017, 19:13

Само по себе свойство используется не по назначению, поэтому и происходит подобный артефакт. Изначально оно задает обтекание и предназначено для работы с текстом, но удивительным образом начали использовать и для построения сеток, но без фиксов для высоты родителя никак не работает...)

@LFC · 23.02.2017, 08:09 **[ТС]**

Видимо,выполняя свойство float, интерпретатор ориентируется на закрывающие теги,и поскольку, </ul> находится после элемента c float,вот интерпретатор и заставляет родительский контейнер тоже обтекать элемент с float. А поскольку открывающий тег родительского контейнера находится выше элемента с float,вот <ul> и схлопывается выше всех. Это чисто мои догадки как сишника))

@mrtoxas · 23.02.2017, 10:49

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

Само по себе свойство используется не по назначению

Это вы где прочитали? Все по назначению - the 'float' property. Просто, не "изначально", а как говорит w3schools - "в самом простом варианте использования".

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 Использованы. . .

@Kumiko 3 / 3 / 3 Регистрация: 10.10.2016 Сообщений: 37
	22.02.2017, 08:46
	Потому-что св-во float вытесняет элемент из обычного потока. Надеюсь помог) 1

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	22.02.2017, 11:11
	LFC, у вас элементы li имеют свойство float, тем самым ul получает высоту 0, задав overflow: hidden решаете проблему 1

@LFC 738 / 543 / 416 Регистрация: 17.09.2015 Сообщений: 1,601
	22.02.2017, 18:06 [ТС]
	aj17, Благодарю.С технической стороны всё более-менее понятно.Остался философский вопрос: почему браузер схлопывает родительский контейнер,ведь свойство float воздействует на последующие элементы? Где можно доки покурить по этому вопросу? 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	22.02.2017, 19:13
	Само по себе свойство используется не по назначению, поэтому и происходит подобный артефакт. Изначально оно задает обтекание и предназначено для работы с текстом, но удивительным образом начали использовать и для построения сеток, но без фиксов для высоты родителя никак не работает...) 0

@LFC 738 / 543 / 416 Регистрация: 17.09.2015 Сообщений: 1,601
	23.02.2017, 08:09 [ТС]
	Видимо,выполняя свойство float, интерпретатор ориентируется на закрывающие теги,и поскольку, </ul> находится после элемента c float,вот интерпретатор и заставляет родительский контейнер тоже обтекать элемент с float. А поскольку открывающий тег родительского контейнера находится выше элемента с float,вот <ul> и схлопывается выше всех. Это чисто мои догадки как сишника)) 0

<ul> сворачивается в ноль

Решение