React component don't visually contain all of it's elements

Question

I wrote a React component that contains some floated divs. Now these floated elements are not visually belonging to outer div as they should, although they continue to structurally belong (click on them, for example, is also a click on the containing div). Now when I switch from block to inline-block, everything is as is it supposed to be. Is this some bug in React of which we should inform them, or am I missing something? Here is the code:

<div className="car_card">
  <img src={carCard.attributes.pictureFile}/>
  <div className="car_buttons">
    <button type="button">Details</button>
    <button type="button">Fill ups</button>
    <button type="button">Reminders</button>
  </div>
  {carStats}
</div>

css:

 .car_buttons {
   float: right;
 }
 .car_card {
   clear: both;
   display: inline-block;
   max-width: 15em;
   margin-right: 2em;
   margin-bottom: 2em;
 }