Почему блок делает отступ

@Novike · Регистрация: 03.05.2018

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

Вот создал я допустим блок закрашенный в зелёный на половину страницы, а теперь хочу создать такой же блок, ну уже на другую часть страницы. Но 2-ой сьезжает вниз относительно 1-го

HTML5

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stuuu.css">
    <title>Anisoc</title>
  </head>
  <body>
    <section class="reg">
    </section>
    <section>
    <div class="art">
    </div>
  </section>
  </body>
</html>

CSS

*{
  margin:0;
  padding:0;
}
.reg{
  height: 100vh;
  width: 50vw;
  background-color: #00ff48;
}
.art{
  float: right;
  height: 100vh;
  width: 50vw;
  background-color: #00ff48;
}

@Qwerty_Wasd · 03.11.2018, 17:34

Novike,

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

Почему блок делает отступ

из-за float

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

блок ... на половину страницы, а теперь хочу создать такой же блок, ну уже на другую часть страницы.

Вариантов сделать это масса, например - https://codepen.io/qwerty_wasd/pen/JejOLV

HTML5

<body>
    <section class="reg">
    </section>
    <section>
    <div class="art">
    </div>
  </section>
  </body>

CSS

*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
html,
body {
  height: 100%;
  width: 100%;
}
 
body {
  display: flex;
  flex-wrap: nowrap;
}
 
section.reg {
  flex-grow: 1;
  background-color: #64B5F6;
}
 
section.art {
  flex-grow: 1;
  background-color: #E57373;
}

@AlexZaw · 03.11.2018, 19:18

Qwerty_Wasd, Приветствую!
Novike, Qwerty_Wasd, виноват тут не float, а единицы измерения и неправильно заданные стили.
Novike
Рассмотрим по порядку.
section это блочный элемент. По умолчанию занимает 100% ширины, после него происходит перенос строки.
Для секции с классом reg задана ширина 50vw, обтекание не задано. Значит этот элемент ВИЗУАЛЬНО занимает половину ширины окна браузера и после него происходит перенос строки. Далее идет новый блок section (который по умолчанию занимает 100% ширины) и в нем находится див с классом art, у которого задана ширина в 50vw и float:right;. Это значит что див занимает половину ширины окна браузера, прижат вправо и все элементы должны его обтекать с левой стороны. Но у него есть родитель, и поэтому его обтекание не распространяется на элементы которые расположены в html коде выше этого родителя. Да и блочные элементы ничего не знают про обтекание и ведут себя так, как будто обтекаемых элементов вообще нет.
Теперь по поводу ширины блоков: еденицы измерения "vw" и "%" - не одно и то же, "vw" не учитывают полосу прокрутки, т.е. считают ширину так, как-будто полосы прокрутки нет. А вот проценты уже учитывают полосу прокрутки и вычитают ее из видимой области экрана.
Наглядно в следующем примере(измените vw на %):

HTML5

1 2	<div class="l"></div> <div class="r"></div>

CSS

*{
  margin: 0;
}
div{
  height: 150vh;
  width: 50vw;
  float: left;
}
.l{
  background: #000;
}
.r{
  background: #f00;
}

Можете заодно в инспекторе посмотреть ширину блоков при vw и процентах.
Вот как-то так... Есть вопросы - задавайте.

@Qwerty_Wasd · 03.11.2018, 19:38

Не по теме:

AlexZaw, приветствую :) Да Вы правы, не обратил должное внимание на верстку ТС.

@Qwerty_Wasd
	03.11.2018, 19:38 Почему блок делает отступ #4
	Не по теме: AlexZaw, приветствую :) Да Вы правы, не обратил должное внимание на верстку ТС. 0

Почему блок делает отступ

Решение