У меня есть два div с двумя основными свойствами отображения блока и ширины

#block1 {
display:block;
width:20%;
background-color:red;
height:100px;
}

#block2 {
display:block;
width:70%;
background-color:yellow;
height:100px;
}
<div id="block1">
</div>

<div id="block2">
</div>

Когда я добавляю свойство float, оно заставляет два div'а вести себя как встроенный блок:

#block1 {
display:block;
width:20%;
float:left;
background-color:red;
height:100px;
}

#block2 {
display:block;
width:70%;
float:left;
background-color:yellow;
height:100px;
}
<div id="block1">
</div>

<div id="block2">
</div>

Почему добавление свойства float: left заставляет div вести себя как встроенный блок

0
Mehdi Souregi 24 Фев 2018 в 02:46

4 ответа

Лучший ответ

Использование float извлекает элементы из нормальный поток документов таким образом, что другие inline элементы могут обтекать их; это не заставляет их вести себя как inline-block элементы.

Если вам нужны альтернативные способы достижения того же эффекта, взгляните на следующие примеры.

Пример 1 .

Вот пример использования display: flex в родительском элементе, чтобы дети оставались в одной строке.

body {
  display: flex;
}

#block1 {
  width: 20%;
  background-color: red;
  height: 100px;
}

#block2 {
  width: 70%;
  background-color: yellow;
  height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>

Пример 2 .

Вот пример использования display: inline-block для обоих элементов, чтобы они оставались на одной строке. Кроме того, font-size: 0 используется на родительском элементе, чтобы гарантировать, что промежуток между ними исчезает.

body {
  font-size: 0;
}

#block1 {
  width: 20%;
  display: inline-block;
  background-color: red;
  height: 100px;
}

#block2 {
  width: 70%;
  display: inline-block;
  background-color: yellow;
  height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>

Пример 3 .

Вот пример использования display: table-cell для обоих элементов, чтобы они оставались на одной строке, а display: table используется для родительского элемента.

body {
  width: 90%;
  display: table;
}

#block1 {
  width: 22.2222222%;     /* 20% of 90% */
  display: table-cell;
  background-color: red;
  height: 100px;
}

#block2 {
  width: 77.7777778%;     /* 70% of 90% */
  display: table-cell;
  background-color: yellow;
  height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
2
Angel Politis 24 Фев 2018 в 00:16

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

Вот почему следующий элемент перемещается в верхний ряд и располагается рядом с плавающим элементом.

Если вы хотите, чтобы следующий элемент оставался в нижней строке, вам нужно использовать свойство clear.

#block1 {
  display: block;
  width: 20%;
  float: left;
  background-color: red;
  height: 100px;
}

#block2 {
  clear: both; /* NEW */
  display: block;
  width: 70%;
  float: left;
  background-color: yellow;
  height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
1
Michael Benjamin 23 Фев 2018 в 23:57

Добавление свойства left в CSS вашего div не сделало их inline-block. Это сделало их плавающими в DOM.

1
GPrimola 23 Фев 2018 в 23:55

Вы правы, говоря, что эта конкретная ситуация float ведет себя как inline-block. Но на самом деле это выглядит так, будто ведет себя так же. Чтобы показать разницу ... допустим, вы были float:left с текстом под ним: тогда ваш div появится слева, а оставшаяся доступная горизонтальная комната будет заполнена текстом.

С поплавком:

.floatie {
    float:left;
    width:170px;
    height:170px; 
    background:blue;
}
<p>
Lorem ipsum dolor sit amet, <div class="floatie"></div>consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

Но тогда, если вы display:inline-block, вы получите другой результат:

.floatie {
    display:inline-block;
    width:170px;
    height:170px; 
    background:blue;
}
<p>
Lorem ipsum dolor sit amet, <div class="floatie"></div>consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
2
Miles 24 Фев 2018 в 00:16