Блог

Главная - Вопросы по программированию - Будет ли край нулевой высоты плавающего элемента рассматриваться как край?

Будет ли край нулевой высоты плавающего элемента рассматриваться как край?

#css #css-float

#css #css-float

Вопрос:

Согласно спецификации CSS:

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

Когда я писал эту демонстрацию, я обнаружил, что плавающие элементы всегда сворачиваются, когда высота равна нулю. Но я не нашел никакого объявления об этом в спецификации CSS. Мой вопрос в том, почему он ведет себя так? Почему ребро с нулевой высотой не считается ребром?

 .container{
  height:500px;
  width:800px;
  background:pink;
}

.f{
  float:left;
  width:100px;
/*   height:50px; */
}

.r{
  position:relative;
}

.a{
  position:absolute;
  top:0;
  left:0;
}  
 <div class='container'>
  <div class='f'>
    <div class='r'>
      <div class='a'>ITEM1</div>
   </div>
  </div>
  <div class='f'>
    <div class='r'>
      <div class='a'>ITEM2</div>
    </div>
  </div>
</div>

Комментарии:

1. Что вы подразумеваете под «краем»?

2. @Paulie_D edge означает внешний край плавающего элемента. «Плавающий прямоугольник сдвигается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего элемента»

3. Потому что элемент без высоты и без ширины … не существует во всех смыслах и целях.

Ответ №1:

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

Добавьте анимацию, чтобы лучше видеть эффект:

 .container{
  height:500px;
  width:800px;
  background:pink;
}

.f{
  float:left;
  width:100px;
  height:50px;
  background:red;
}

.r{
  position:relative;
}

.a{
  position:absolute;
  top:0;
  left:0;
}

@keyframes change {
  to {
    height:0;
  }
}  
 <div class='container'>
  <div class='f' style="animation:change 3s linear forwards">
    <div class='r'>
      <div class='a'>ITEM1</div>
   </div>
  </div>
  <div class='f' >
    <div class='r'>
      <div class='a'>ITEM2</div>
    </div>
  </div>
</div>

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

Единственный способ получить ребро — убедиться, что есть хотя бы небольшая высота, даже если это граница, отступ и т.д.

 .container{
  height:500px;
  width:800px;
  background:pink;
}

.f{
  float:left;
  width:100px;
  height:50px;
  background:red;
}

.r{
  position:relative;
}

.a{
  position:absolute;
  top:0;
  left:0;
}

@keyframes change {
  to {
    height:0;
  }
}  
 <div class='container'>
  <div class='f' style="animation:change 3s linear forwards;border-top:0.2px solid">
    <div class='r'>
      <div class='a'>ITEM1</div>
   </div>
  </div>
  <div class='f' >
    <div class='r'>
      <div class='a'>ITEM2</div>
    </div>
  </div>
</div>