Why float-right, float-left don't working properly?

Issue

This is snippet code.

<div class="row col-xs-12">
<a *ngFor="let rec of recipe "href="#" class="list-group-item clearfix">
    <div class="float-left">
        <h4 class="list-group-item-heading">{{rec.name}}</h4>
        <p class="list-group-item-text">{{rec.description}}</p>
    </div>
    <span class="float-right">
        <img [src]="rec.imagePath" alt="{{rec.name}}" class="img-responsive" style="max-height: 50px;">
    </span>
</a>
<app-recipe-item></app-recipe-item>

I wonder why float-right don't align image to right side. If i use insetead pull-right it's working.I have read that bootstrap 4 we should float rather than pull.

Solution

I deleted list-group-item, list-group-item-heading , list-group-item-text and it worked.

<a href="#" class="clearfix" *ngFor="let recipe of recipes">
        <div class="float-left">
            <h4>{{ recipe.name }}</h4>
            <p>{{ recipe.description }}</p>

Answered By - Byron