Форум

nuboquest · #1 (**permalink**) 14.03.2015, 16:26

Сабж. У меня че-то уходит вниз страницы. Пробовал вставлять внутрь спаны, дивы, параграфы, все то же самое.

вот простой пример

<html>
<head>
<style>
 body{background: grey}
 .w{float:left; background: blue; height: 100px; width: 50px}
 .d{
   position: relative;
   border: 5px solid black;
   height: 40px; width: 40px;
}
 
</style>
</head>
<body>

<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="w"></div>
<div class="d"></div>
<div class="d">foo</div>
<div class="d"></div>
<div class="d"></div>

</body>
</html>

jsfiddle:

https://jsfiddle.net/w2nw3743/

danik.js · #2 (**permalink**) 14.03.2015, 20:16

.d{clear:both}

Вот что у тебя происходит, только упрощенно:

<!DOCTYPE html>
<style>
.floated{
    float: left;
    background: blue;
    width: 100px;
    height: 100px;
    opacity: 0.5;
}
.reqular{
    background: red;
}
</style>

<div class="floated"></div>
<div class="reqular">abc cde<br>efg</div>

Таким образом, floated блоки не влияют на позиционирование других блоков, но при этом смещают их содержимое.

Форум

Справочник

Discord чат

Курсы javascript