Разбивает ли Float Value поведение элементов блока? - PullRequest
0 голосов
/ 21 марта 2020

Элементы блока по умолчанию занимают всю ширину страницы, так почему свойство float делает эти 2 блока встроенными? Разрывает ли поплавок поведение элементов блока?

 .block-text1 {
  width: 1000px;
  background-color: cyan;
  float: left;
}

.block-text2 {
  width: 1000px;
  background-color: blue;
  float: right;
} 

введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 22 марта 2020

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

Плавающие элементы имеют совершенно отдельное правило ширины.

0 голосов
/ 21 марта 2020

Да, число с плавающей запятой перекрывает элемент блока отображения.

Если вы хотите, чтобы 2 поля отображались рядом друг с другом, и заполните экран, вы можете использовать CSS gridbox

HTML

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>

CSS

.container {
   display: grid;
   grid-template-columns: 50% 50%;
   grid-gap: 50px; //This is the vertical gap between the 2boxes.
   width: 100%;
}

Если вы хотите, чтобы 1 коробка была больше, вы можете изменить 50% 50%, например, на 30% 70%

Тогда если вы хотите отобразить поля под каждым из них на меньшем экране, добавьте это к CSS

@media (max-width: 900px) {
   .container {
     grid-templace-columns: 1fr;
   }
}

И если вы не хотите, чтобы 2 коробки отображали на экране полный комплект, вы можете изменить с помощью Элемент .container в вашем CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...