Angular Project background image hide from the style.css class

Question

CSS and HTML.

I got below issue.

In the Angular project I have home.component.html like below:

    <div id="homecontent">
    <div class="imageslide">
        <ng-image-slider [images]="imageObject" [imageSize]="{width: '20%', height: '30%', space: 3}" #nav></ng-image-slider>
    </div>

    <div id="siteDesc">
        <h2>H test</h2>

    </div>
    <div class="left"> 
        <p>
            Some text
        </p>
    </div>
</div>

My home.component.css is as below

#homecontent{
  background-image: url(/assets/images/pagebackgorund.jpg);
  padding: 0;
  margin: 0;
}

left{
float: left;
}

Now my question is the image I set in #homecontent is reset in the .left class div. How can I avoid it?

Answer 1

.left {
   float: left;
   clear:left;
}

clear: left will not override any relative elements in left. it will float left till it have space as soon as any element will be encountered, it will stop there.