<div class="container">
<div class="block block1">.block1</div>
<p>Как и позиционирование, float используется для того, чтобы двигать боксы.</p>
<div class="block block2">.block2</div>
<p>Но в отличие от позиционирования, которым можно двигать боксы практически произвольно, все, что может float — это сдвинуть элемент к одной из сторон потока, правой или левой.</p>
<p><img src="http://softwaremaniacs.org/media/blog/float-behavior.png" width="100"> При этом сам бокс и следующие за ним в потоке приобретают интересное поведение: float'нутый бокс смещается по горизонтали и прилипает к одной из сторон родителя.</p>
</div>
CSS:
body{ font-family:‘PT Sans’, sans-serif;}
.container{
width:400px;
padding: 30px; /*именно вот этот падинг контейнера влияет и дает кстати эффект того, что текст верхний встает не в ровень с block1 */
margin:20px auto;
box-shadow:0 0 2px #ccc;}
.block{
width:80px;
padding:10px;
background:#3498db;
color:white;
border:2px solid #34495e;}
img, .block1{
float:left;
margin-right: 10px;
}
.block2{float: right;
margin-left: 10px; }
p{
background:#ecf0f1;
border:2px dotted #bdc3c7;
}
Почему в случае с блоком2 текст встает вровень как бы по верхней кромке, а блок1 выше текста ?
Понятно вы объяснили свой вопрос. Я тоже не знаю, почему так получается. Но знаю, как исправить. Добавить внешний отступ сверху для block1.
Модератор тему эту прочитает и может разъяснит. Будем ждать. Мне тоже стало интересно)
Не знаю на сколько поможет , но если в HTML перед объявлением первого блока поставить
пустой абзац то в принципе тоже все выравнивается , но хотелось бы научное объяснение , что там куда “схлопывается” или чего))).
Так же пробовал в css абзацу прописывать внешний отступ снизу в принципе можно смоделировать ситуацию тогда как и с блоком1 получается
p{
background:#ecf0f1;
border:2px dotted #bdc3c7;
margin-bottom: 0px; (5px или 10px)
}
При таком раскладе блок 2 тоже начинает ехать. На сколько понимаю блок1 и блок2 когда мы их начинаем флоатить они стают как бы блочными элементами. А абзац текстовый. Поэтому ведут себя по разному. Но хотелось бы более углубленного ответа что ли по возможности.
Это я понимаю но у нас в коде css есть внутренние отступы у контейнера
.container{
width:400px;
padding: 30px;
margin:20px auto;
box-shadow:0 0 2px #ccc;}
И на этот отступ эти элементы по разному реагируют
Тут просто в совокупности нада доводы абзаца если накидываете на первый блок то его и на второй накидывайте я с кодом в принципе разобрался относительно если ручками отступы у абзацев прописывать в css то такой чехорды нет,но почему первый и второй абзац ведет себя как бы по умолчанию по разному и блок 1 и блок2 ))) в общем без пол литра не объяснить))). Просто стало интересно. Может я сам на ночь глядя уже гоню )))
.block2 {
margin-top:20px;
}
Вывод Расстояние между блоками общее будет 40pх (ну если не учитывать бордеры) Те вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними
Второй случай:
Есть два блока блок1-родитель и блок-2 потомок внутри
}В данном случае вертикальный отступ между верхней границей блока1 и блока2 будет уже не 40 как в первом случае а 60пх, те они сложатся, точно так же как складываются горизонтальные отступы.
Те на сколько я понял отсюда эта разница в поведении между первым и вторым абзацем и вылезает.
Млин забить походу нада на этот абзац ))) Выставил верхний отступ у контейнера внутренний в 0 все ок . Но стоит туда хотя бы 1пх задать и опять сразу огромная разница Все равно тут в чем то другом замес еще. Не понимаю почему второй и последующие абзацы ведут себя по другому. Ineska если сможешь объяснить в чем я туплю и в чем тут дело буду благодарен если знаешь ответ.
по умолчанию в браузерах есть отступы. Именно они и дают такой эффект в первом блоке:” Но у второго и следующих абзацев тоже же отступы или они отличаются от первого.
Все равно тут в чем то другом замес еще. Не понимаю почему второй и последующие абзацы ведут себя по другому. Ineska если сможешь объяснить в чем я туплю и в чем тут дело буду благодарен если знаешь ответ.