Сетки / Погружение в флоаты [8/32]

Курсы §15. Сетки
1

Снимокffghj.JPG1219×642 110 KB

Почему у первого блока абзац обтекает не с самого верха?

2
1 лайк
3

Спасибо

4

А что не так я что то не пойму

5

в первом и третьем заданиях флоат и маргин нужно задать не только блоку 1, но и изображению. По вашему скрину не видно, сделали ли вы указанное для элемента img

6

Сижу-туплю над кодом, и не могу понять почему так:

.block1 {
float: left;
}

img,
.block1 {
margin-right: 10px;
}

.block2 {
float: right;
margin-left: 10px;
}

Снимок.JPG582×657 53.7 KB

Подскажите, почему блок1 вылетает за рамки тега <р>? Что было выше - читал, но хоть убейте - не понял.

7

Еще одна похожая тема: Помогите разобраться

8

Да, я видел ту тему и ранее, но от ее прочтения к сожалению понимание не пришло. А спокойно жить не могу пока не пойму природу этого бреда.

9

О природе бреда рассказывали в курсе “Блочная модель документа”. Эффект “выпадания” внешних отступов, если не ошибаюсь.
У флоатов бывает нелогичное поведение. С этим ничего не поделать.

10

Но если я убираю внутренние отступы у родительского тега, либо задаю маргин-топ 16рх то все равно не принимает система этого результата, но визуально все о’k. Не говорю уже про одну из догадок товарища - о создании пустого блока <р>.

11

Код текстом прикрепите, пожалуйста. Полностью. И ссылку на задание.

12

Вот ссылка: https://htmlacademy.ru/courses/65/run/8
Вот полный код:
body {
font-family: “PT Sans”, sans-serif;
}

.container {
width: 400px;
margin: 20px auto;
padding: 10px;
box-shadow: 0 0 2px #cccccc;
}

.block {
width: 80px;
padding: 10px;
color: white;
background: #3498db;
border: 2px solid #34495e;
}

p {
background: #ecf0f1;
border: 2px dotted #bdc3c7;
}

.block1 {
float: left;
margin-top: 16px;
}

img,
.block1 {
margin-right: 10px;
}

.block2 {
float: right;
margin-left: 10px;
}

13

По первой цели вы не задали float: left; изображению.

14

Вот я напорол… Спасибо за подсказку. Теперь все отработало:
.block1 {
margin-top: 16px;
}

img,
.block1 {
float: left;
}

img,
.block1 {
margin-right: 10px;
}

.block2 {
float: right;
margin-left: 10px;
}
P.S. Но если возвращаю в прежний вид код (такой, какой я его написал постом выше) - отчего то блок1 теперь встает в паз как “родной”, и не вылазит за рамку блочного тега <р> :confused: . Какой-то злостный прикол от флоата.

15

Возвращаясь к этому же заданию после его прохождения, и вставляя туда не корректный код (Сетки / Погружение в флоаты [8/32]) я вижу просто нечто, а именно: код при котором ранее блок1 вылазил за рамки, теперь уже не выталкивает за границы блок1, а ставит его туда, куда надо! Вопрос риторический: ну как так!?!? тот же код!:frowning2: