Почему элемент выходит за пределы родителя?

Question

[Incold]

Здравствуйте! Сверстал progress bar, но почему то он не входит в пределы родителя

Вот html:

<div className="blockShadow col-4 mt-4">
            <div className="container-fluid d-flex align-items-end p-2 mt-2">
                <h4 className="m-0">Occupancy</h4>
                <CustomDatepicker /> // это компонента реакт, отвечающая за datepicker, не обращайте на неё внимания
            </div>
// Вот progress bar, он входит в состав элемента с классом blockShadow, который делает белый фон и тень
            <div className="progress d-flex justify-content-center" id="listingsOccupancy">
                <div className="barOverflow">
                    <div className="bar"></div>
                </div>
                <span className="font-weight-bold">14%</span>
            </div>
  </div>

СSS:

#listingsOccupancy {
    position: relative;
    margin: 6px;
    height: 80px;
    float:left;
    text-align: center;
    background: none;

    span {
      position: absolute;
      font-size: 3em;
      bottom: 25%;
    }

    .barOverflow {
      position: relative;
      overflow: hidden;
      width: 150px; height: 75px;
    }

    .bar {
      position: absolute;
      top: 0; 
      left: 0;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      box-sizing: border-box;
      border: 15px solid #4f5475;
      border-bottom-color: green;
      border-right-color: green;
    }
  }

По идее progress bar должен быть обёрнут в blockShadow блок (т.е. хотя бы иметь белый фон), но этого не происходит. Я так и не смог определить из-за чего это происходит, менял свойства (position, overflow и т.д.), удалял классы, но ничего не помогло. Может быть это связано с тем, что у progress bar фиксированные размеры?

Как это исправить? Заранее, спасибо, за любую помощь!

Comments

[approximate solution]

https://codepen.io/ - залейте Ваш код сюда

Answer 1

[Владимир Проскурин]

Уберите float: left, из-за него вы теряете высоту вашего блока, и поэтому родительский блок имеет высоту без учета вашего . bar
И вообще, используйте float только по прямому назначению - для обтекания элемента остальными элементами. В данном случае обтекание не нужно.