Обтекание флоат

@dimon888951 · Регистрация: 04.10.2012

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

Объясните мне тупому почему в этом коде не происходит обтекание по правому краю блока контент.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="container">
    <div class="content">
        <p>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p>
    </div>
        <div class="right">
            <ul>
            <li>первый</li>
            <li>первый</li>
            <li>первый</li>
            <li>первый</li>
            <li>первый</li>
            <li>первый</li>
            </ul>   
        </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
.container {
    width:980px;
}
.content {
    width:660px;
    float:left;
   
}
.right {
    width:300px;
}

http://jsfiddle.net/nzd8cmha/

Добавлено через 2 часа 52 минуты
да уж 20 просмотров не одного ответа... А ведь простой вопрос

@StopSmell · 17.02.2015, 22:32

Файрбаг в помощь.
Content вырван из потока флоатом, последующий элемент (right) начинается от начала строки (не от конца зафлоаченного блока, а от начала строки!!). Т.к. его ширина ограничена 300 пикселями, он не помещается в той же строке, на первой линии, потому content выталкивает right вниз.

@phpk · 17.02.2015, 22:44

установи для right {float: right}
или margin-left: 660px;

@dimon888951 · 18.02.2015, 05:38 **[ТС]**

Я просто хочу понять логику. Почему если я не задам размер блоку right то он обтекает блок контент. И еще если я блоку conten float:right, то обтекание будет слева, и все умещается.

И что значит "Т.к. его ширина ограничена 300 пикселями, он не помещается в той же строке, на первой линии, потому content выталкивает right вниз." 660+300 = 960, а контейнер 980 пикселей, пожалуйста объясните ,очень нужно

@StopSmell · 18.02.2015, 09:08

На первой схеме обычное расположение блоков, без флоатов.
На второй с float: left у блока content. Ширина второго блока отсчитывается от начала строки (!) (координаты 0 по оси х и 0 по y). Т.к ширина первого блока 690, второй блок с шириной 300, фактически должен бы лежать на первом, но т.к. второй блок не может перекрывать содержимое первого, он сползает вниз на высоту контента первого блока.
Уберите ширину второго блока, подсветите его файрбагом, ширина этого блока 100% (от начала, поверх первого элемента). Затем уменьшайте ширину второго блока, когда его ширина станет приближаться к 690, ему некуда будет деваться кроме как спрыгнуть вниз. Первый элемент зафлоачен, он не абсолютно\фиксировано спозиционирован (!), он влияет на окружающие его блоки (!).

@dimon888951 · 18.02.2015, 12:07 **[ТС]**

Не понял , я пытаюсь но не понимаю, где логика здесь?
float - Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Все больше ничего не сказано...
Смотрите ширина общего контейнера 980 px в нем вложены 2 контейнера 660px и 300px.
У первого контейнера float:left следовательно первый контейнер выравнивается по левому краю блока родителя, а второй его обтекает справа, вот в этом функция float.
В нашем случает ширина первого 660px, а второго, который должен обтекать 300px итого 660+300=960, еще 20px в запасе общий контейнер ведь 980px
Теперь я прошу нормально объяснить что мешает обтеканию. И при чем здесь фраза, что начинается отсчет сначала строки, почему сначала? ведь float же стоит... Да все я вижу стоит firefox developer, но понимая от того что вижу не добавляется.
Хорошо как реализован вот 2- колоночный макет в бутстрап там ведь тоже общий контейнер затем в нем блок контента ширина в % если помню то 66.66% с float:left и сайдбар с шириной 33.33%. и все и вся обтекает.
Еще вот сказано такое "В случае, если ширина последующего контента зафиксирована, он не будет переноситься ниже выровненного float’ом div’а. Вместо этого он применит свою ширину." А ширина то в моем случае зафиксирована а блок все равно переносится ниже предыдущего.

@Ukkas · 18.02.2015, 13:08

dimon888951, все просто. При использовании float, элемент выпадает из потока. И вот следующий элемент (правый) не в курсе что до него кто-то был (левый), поэтому правый и начинается от начала строки.
Самый простые способы:
добавить float обоим блокам, что бы они были в одинаковой ситуации,
либо правому задавать отступ слева шириной с левый блок.

@StopSmell · 18.02.2015, 13:21

В бутстрапе все колонки в строке row имеют float: left; потому они идут друг за другом.
x-горизонталь, y-вериткаль, высота блоков допустим 50px.
Поток идет сверху вниз, вырываем блок из потока первый блок (660px) встает с координатами 0:0-690:50 (диагональ), второй блок (300px) идет в потоке, т.е. должен встать с координатами 0:0-300:50, данное пространство заполнено первым блоком, т.к. поток идет сверху вниз, содержимое блока сползает вниз на 50px.

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

И при чем здесь фраза, что начинается отсчет сначала строки, почему сначала? ведь float же стоит...

Потому что float стоит у первого блока, это он вырван из потока, а второй блок как был в потоке, так и следует в нем же, т.е. он размещается от 0 до 100%, ну в нашем случае второй блок расположен - от 0 до 300пикселей.

Более внятно не могу объяснить, может кто-то еще отпишется.

@phpk · 18.02.2015, 13:33

dimon888951 вот код, там в блок right добавлено больше текста, чтобы было понятней, сейчас блок right обтекает и ему задана ширина 100%! И лучше выделять блоки цветом, чтобы было понятней. Блок content в данном случае влияет на окружающие блоки

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            border: 0;
            height: 100%;
        }
 
        .container {
            width: 980px;
            background: yellow;
            overflow: hidden;
        }
 
        .content {
            width: 660px;
            float: left;
            background: green;
            /*position: absolute;*/
 
        }
 
        .right {
            width: 100%;
            background: red;
            /*float: left;*/
            /*margin-left: 660px;*/
        }
        p {
            padding: 0;
            margin: 0;
        }
    </style>
    <script>
 
 
    </script>
</head>
<body>
 
<div class="container">
    <div class="content">
        <p>В процессе написания одного веб-приложения возникла необходимость тестировать код на PHP, интенсивно
            взаимодействующий с БД MySQL. В проекте в качестве фреймворка модульного тестирования использовался порт
            xUnit — PHPUnit. В результате было принято решение писать тесты для модулей, непосредственно
            взаимодействующих с базой, подцепив плагин PHPUnit/DbUnit. Дальше я расскажу о тех трудностях, которые
            возникли при написании тестов и о том, каким способом я их преодолел. В ответ же хотелось бы получить
            комментарии знающих людей относительно корректности моих решений.</p>
    </div>
    <div class="right">
        <p>Чтобы протестировать класс, написанный на PHP, с использованием фреймворка PHPUnit, необходимо создать
            тестовый класс, расширяющий базовый класс PHPUnit_Framework_TestCase. Затем создать в этом классе публичные
            методы, начинающиеся со слова test (если создать метод, который будет называться по-другому, он не будет
            автоматически вызван при прогоне тестов), и поместить в них код, выполняющий действия с объектами
            тестируемого класса и проверяющий результат. На этом можно закончить и скормить полученный класс phpunit,
            который, в свою очередь, последовательно вызовет все тестовые методы и любезно предоставит отчет об их
            работе. Однако в большинстве случаев в каждом из тестовых методов будет повторяющийся код, подготавливающий
            систему для работы с тестируемым объектом. Для того, чтобы избежать дублирования кода, в классе
            PHPUnit_Framework_TestCase созданы защищенные методы setUp и tearDown, имеющие пустую реализацию. Эти методы
            вызываются перед и после запуска очередного тестового метода соответственно и служат для подготовки системы
            к выполнению тестовых действий и очистки ее после завершения каждого теста. В тестовом классе, расширяющем
            PHPUnit_Framework_TestCase, можно переопределить эти методы и поместить повторяющийся ранее в каждом
            тестовом методе код в них. В результате последовательность вызова методов при прогонке тестов будет
            следующая:
 
            setUp() {/* Установили систему в нужное состояние */}</p>
    </div>
</div>
</body>
</html>

потом если раскомментировать строку 24, то в результате блок content станет как-бы самостоятельным, вне потока, не влияющий на окружающие блоки

@dimon888951 · 18.02.2015, 14:42 **[ТС]**

На практике я понимаю, как сделать, но вот такой человек, что пока суть не пойму не успокоюсь. Вот форумчанин говорит"При использовании float, элемент выпадает из потока. И вот следующий элемент (правый) не в курсе что до него кто-то был (левый), поэтому правый и начинается от начала строки. " Но это наверное же неверно. Да элемент выпадает из потока, но сделаете следующему элементу тоже float:left и он прилипнет справа к первому элементу, значит второй то элемент видит и знает о существование первого блока,хотя тот вынесен из потока. Но в таком случае если он знает , что элемент вынесен из потока почему он начинает отсчет с нуля?

Ну вообщем я не могу понять, вот не доходит почему второй элемент не хочет встать справа первого элемента ведь там свободное пространство 980- 660= 320 пк и он вполне умещается ведь его ширина 300x. Вот именно это не пойму. Мы дали команду последующим элементам после блока с флоат , вот берите и обтекайте этот блок, а тут и место вроде есть а он типа не видит этого блока и лепится в начало. То зачем тогда флоат я могу просто сдвинуть его марджином без какого то флоат на свободной место...

@phpk · 18.02.2015, 14:54

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

То зачем тогда флоат я могу просто сдвинуть его марджином без какого то флоат на свободной место...

Если у блока content убрать флоат, и блоку right добавить марджин, то этот блок right не будет справа от блока content, а будет внизу, под блоком content справа

Добавлено через 1 минуту
Я сразу также не понимал, но с практикой начинаешь понимать

@Ukkas · 18.02.2015, 15:03

dimon888951,

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

Но это наверное же неверно

почему неверно, я просто художественно расписала то, что до этого Вам схемами рисовали.

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

Да элемент выпадает из потока, но сделаете следующему элементу тоже float:left

Когда мы сделаем следующему элементу float:left, то он так же выпадет из потока. (Я это написала как первый пункт решения проблемы) И они оба становятся "вне потока".

Ну и про флоат
«Float» — одно из CSS свойств блочного элемента разметки, благодаря которому HTML элемент смещается в крайнее, доступное для размещения, левое или правое положение внутри содержащего этот элемент контейнера. В зависимости от установленного значения float, строчные элементы могут обтекать такой элемент по одной из его горизонтальных сторон.

А второй правый div у вас блок, а не строчной элемент.

Добавлено через 6 минут
А вот пример прям обтекания

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
    <div class="content">
        <p>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p>
    </div>
        <span>
            Задача организации, в особенности же новая модель организационной деятельности обеспечивает широкому кругу (специалистов) участие в формировании дальнейших направлений развития. Повседневная практика показывает, что консультация с широким активом в значительной степени обуславливает создание соответствующий условий активизации. Товарищи! постоянное информационно-пропагандистское обеспечение нашей деятельности способствует подготовки и реализации направлений прогрессивного развития. Идейные соображения высшего порядка, а также сложившаяся структура организации позволяет выполнять важные задания по разработке модели развития.
        </span>
</div>
<style>
    .container {
        width:980px;
    }
    .content {
        width:660px;
        float:left;
        background-color: red;
    }
    span{
        width:330px;
        background-color: green;
    }
</style>

@dimon888951 · 18.02.2015, 15:11 **[ТС]**

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

Если у блока content убрать флоат, и блоку right добавить марджин, то этот блок right не будет справа от блока content, а будет внизу, под блоком content справа

Если там есть место то,как это не будет...margin-left на ширину первого блока и margin-top минус высота первого блока и все без float

Добавлено через 2 минуты

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

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

Вот за это спасибо, а то перечитал кучу статей и где-то видимо я не обратил внимание, а где-то и не написано это. Именно строчные элементы, ну это другой разговор. Еще раз спасибо.

@Ukkas · 18.02.2015, 15:13

dimon888951,

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

Если там есть место то,как это не будет...margin-left на ширину первого блока и margin-top минус высота первого блока и все без float

а если мы не знает высоты первого блока..
есть еще вариант: двум блокам задаем display: inline-block; и они идут друг за другом

Новые блоги и статьи Все статьи Все блоги /
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 Использованы. . .

Обтекание флоат

Решение

Решение

@StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370
	17.02.2015, 22:32
	Файрбаг в помощь. Content вырван из потока флоатом, последующий элемент (right) начинается от начала строки (не от конца зафлоаченного блока, а от начала строки!!). Т.к. его ширина ограничена 300 пикселями, он не помещается в той же строке, на первой линии, потому content выталкивает right вниз. 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	17.02.2015, 22:44
	установи для right {float: right} или margin-left: 660px; 0

@dimon888951 20 / 19 / 5 Регистрация: 04.10.2012 Сообщений: 223
	18.02.2015, 05:38 [ТС]
	Я просто хочу понять логику. Почему если я не задам размер блоку right то он обтекает блок контент. И еще если я блоку conten float:right, то обтекание будет слева, и все умещается. И что значит "Т.к. его ширина ограничена 300 пикселями, он не помещается в той же строке, на первой линии, потому content выталкивает right вниз." 660+300 = 960, а контейнер 980 пикселей, пожалуйста объясните ,очень нужно 0

@StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370
	18.02.2015, 09:08
	На первой схеме обычное расположение блоков, без флоатов. На второй с float: left у блока content. Ширина второго блока отсчитывается от начала строки (!) (координаты 0 по оси х и 0 по y). Т.к ширина первого блока 690, второй блок с шириной 300, фактически должен бы лежать на первом, но т.к. второй блок не может перекрывать содержимое первого, он сползает вниз на высоту контента первого блока. Уберите ширину второго блока, подсветите его файрбагом, ширина этого блока 100% (от начала, поверх первого элемента). Затем уменьшайте ширину второго блока, когда его ширина станет приближаться к 690, ему некуда будет деваться кроме как спрыгнуть вниз. Первый элемент зафлоачен, он не абсолютно\фиксировано спозиционирован (!), он влияет на окружающие его блоки (!). Миниатюры 0

@dimon888951 20 / 19 / 5 Регистрация: 04.10.2012 Сообщений: 223
	18.02.2015, 12:07 [ТС]
	Не понял , я пытаюсь но не понимаю, где логика здесь? float - Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Все больше ничего не сказано... Смотрите ширина общего контейнера 980 px в нем вложены 2 контейнера 660px и 300px. У первого контейнера float:left следовательно первый контейнер выравнивается по левому краю блока родителя, а второй его обтекает справа, вот в этом функция float. В нашем случает ширина первого 660px, а второго, который должен обтекать 300px итого 660+300=960, еще 20px в запасе общий контейнер ведь 980px Теперь я прошу нормально объяснить что мешает обтеканию. И при чем здесь фраза, что начинается отсчет сначала строки, почему сначала? ведь float же стоит... Да все я вижу стоит firefox developer, но понимая от того что вижу не добавляется. Хорошо как реализован вот 2- колоночный макет в бутстрап там ведь тоже общий контейнер затем в нем блок контента ширина в % если помню то 66.66% с float:left и сайдбар с шириной 33.33%. и все и вся обтекает. Еще вот сказано такое "В случае, если ширина последующего контента зафиксирована, он не будет переноситься ниже выровненного float’ом div’а. Вместо этого он применит свою ширину." А ширина то в моем случае зафиксирована а блок все равно переносится ниже предыдущего. 0

@Ukkas 153 / 126 / 39 Регистрация: 02.05.2012 Сообщений: 573
	18.02.2015, 13:08
	Сообщение было отмечено dimon888951 как решение Решение dimon888951, все просто. При использовании float, элемент выпадает из потока. И вот следующий элемент (правый) не в курсе что до него кто-то был (левый), поэтому правый и начинается от начала строки. Самый простые способы: добавить float обоим блокам, что бы они были в одинаковой ситуации, либо правому задавать отступ слева шириной с левый блок. 1

@dimon888951 20 / 19 / 5 Регистрация: 04.10.2012 Сообщений: 223
	18.02.2015, 14:42 [ТС]
	На практике я понимаю, как сделать, но вот такой человек, что пока суть не пойму не успокоюсь. Вот форумчанин говорит"При использовании float, элемент выпадает из потока. И вот следующий элемент (правый) не в курсе что до него кто-то был (левый), поэтому правый и начинается от начала строки. " Но это наверное же неверно. Да элемент выпадает из потока, но сделаете следующему элементу тоже float:left и он прилипнет справа к первому элементу, значит второй то элемент видит и знает о существование первого блока,хотя тот вынесен из потока. Но в таком случае если он знает , что элемент вынесен из потока почему он начинает отсчет с нуля? Ну вообщем я не могу понять, вот не доходит почему второй элемент не хочет встать справа первого элемента ведь там свободное пространство 980- 660= 320 пк и он вполне умещается ведь его ширина 300x. Вот именно это не пойму. Мы дали команду последующим элементам после блока с флоат , вот берите и обтекайте этот блок, а тут и место вроде есть а он типа не видит этого блока и лепится в начало. То зачем тогда флоат я могу просто сдвинуть его марджином без какого то флоат на свободной место... 0