Непонимание поведения атрибутов float и overflow - PullRequest
Новая
       2

Непонимание поведения атрибутов float и overflow

1 голос
/ 26 мая 2020 

.title-strip{
  background: green;
  margin: 0;
  }
.title1 {
  overflow: hidden;
  }
.title2 {
  float: right;
  }
<div>
  <h1 class="title-strip title1">Title1</h1>
  <h1 class="title-strip title2">Title2</h1>
</div>

.title-strip {
  background: green;
  margin: 0;
}

.title1 {
  overflow: hidden;
}

.title2 {
  float: right;
}
<div>
  <h1 class="title-strip title2">Title2</h1>
  <h1 class="title-strip title1">Title1</h1>
</div>

Если первый тег h1 имеет класс title1, а второй - класс title2, текст находится в разных строках.
Но когда классы местами текст находится на отдельных строках. Зачем?

Я прочитал ответ о переполнении стека, в котором говорилось, что «BFC не позволяют дочерним поплавкам выходить из них, и они не позволяют вторгаться в них поплавкам братьев и сестер / предков», - результат слов в той же строке, кажется, go против этого.
Я не прав?

Ответы [ 2 ]

0 голосов
/ 26 мая 2020

Я прочитал ответ о переполнении стека, в котором говорилось, что «BFC не позволяют дочерним поплавкам выходить из них, а также не позволяют поплавкам братьев и сестер / предков вторгаться в них», верно не тогда, когда overflow применяется к элементу с плавающей запятой, а когда элемент с плавающей запятой находится внутри , элемент, в котором применяется overflow

Вот базовый пример c для понять: 

.title-strip {
  background: green;
  margin: 0;
}

.title1 {
  background: red;
}

.title2 {
  float: right;
}
<div>
  <h1 class="title-strip title2">Title2</h1>
</div>
<h1 class="title-strip title1">Title1</h1>

<br>
<div style="overflow:hidden;">
  <h1 class="title-strip title2">Title2</h1>
</div>
<h1 class="title-strip title1">Title1</h1>

Посмотрите, как во втором случае плавающий заголовок больше не находится справа от не плавающего, потому что он находится внутри div с overflow:hidden. Это собственный BF C, поэтому он больше не взаимодействует ни с чем снаружи.

0 голосов
/ 26 мая 2020

добро пожаловать в stackoverflow. Overflow: hidden не имеет значения (пожалуйста, знайте это). Когда вы используете свойство float для элемента, он действует как встроенный блок, даже если он является блочным. В примере, который вы здесь сделали, строка, в которой он расположен (строка, до которой он может go) наклоняется вправо и остается встроенным блоком.

Я изменил цвета, чтобы вы могли видеть более четко. Пожалуйста, внимательно изучите оба образца. в первом примере сначала используется правый элемент с плавающей запятой, затем используется блочный элемент, потому что они переключаются внутрь. Но если блочный элемент используется первым, то он продолжается от нижней строки, не закрывая область.

Небольшое примечание: сегодня Float больше не используется часто. Вместо этого я предлагаю вам выбрать такие структуры, как display-flex или display-grid. Они одновременно проще и удобнее для создания отзывчивого внешнего вида. Надеюсь описание то, что я имею в виду. 

.title-strip {
  background: green;
  margin: 0;
}

.title1 {
  /* overflow: hidden;   it doesn't make any difference. */
  background-color: yellow;
}

.title2 {
  float: right;
  background-color: red;
}
<div>
  <h1 class="title-strip title2">Title2</h1>
  <h1 class="title-strip title1">Title1</h1>
</div>
<div style="height: 75px;"></div>

<div>
  <h1 class="title-strip title2" style="margin-top: 50px;">Title2</h1>
  <h1 class="title-strip title1">Title1</h1>
</div>
<div style="height: 75px;"></div>
<div>
  <h1 class="title-strip title1">Title2</h1>
  <h1 class="title-strip title2">Title1</h1>
</div>
...