установить ясно, без такового и должны иметь разрешение? - PullRequest
0 голосов
/ 29 февраля 2020

Я прочитал spe c clear и не могу придумать, как установить clear и не вводить разрешение. у spe c есть только один пример, когда есть зазор, но не говорите, когда нет.

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

Я думаю, край верхней границы элемента должен совпадать с краем float (когда один элемент float), поэтому не может быть примера, чтобы понять без разрешения

eg1 (высота 1px)

.floated {
  float: left;
  width: 100px;
  height: 100px;
  background-color: cyan;
}

.block {
  height: 1px;
  background-color: green;
}

.cleared {
  clear: left;
  background-color: silver;
  margin-top: 200px;
}
<div class="floated">floated</div>
<div class="block"></div>
<div class="cleared">cleared</div>

eg2 (высота 0px)

.floated {
  float: left;
  width: 100px;
  height: 100px;
  background-color: cyan;
}

.block {
  height: 0px;
  background-color: green;
}

.cleared {
  clear: left;
  background-color: silver;
  margin-top: 200px;
}
<div class="floated">floated</div>
<div class="block"></div>
<div class="cleared">cleared</div>

1 Ответ

1 голос
/ 29 февраля 2020

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

In В следующем примере div с классом «cleared» предшествует плавающий элемент, очищается с той же стороны, но не имеет разрешения.

.floated {
   float:left;
   width:100px;
   height:100px;
   background-color:cyan;
 }
 .block {
   height :110px;
   background-color:green;
 }
 .cleared {
   clear: left;
   background-color:silver;
 }
<div class="floated">floated</div>
<div class="block">A block</div>
<div class="cleared">cleared</div>

В то время как в этом примере он имеет зазор 10px:

.floated {
   float:left;
   width:100px;
   height:100px;
   background-color:cyan;
 }
 .block {
   height :90px;
   background-color:green;
 }
 .cleared {
   clear: left;
   background-color:silver;
 }
<div class="floated">floated</div>
<div class="block">A block</div>
<div class="cleared">cleared</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...