Question: I have a class defined like this:

```
<div class="float-left inline">

```

where:

```
.inline {
   display: inline;
}
.float-left {
   float: left;
}

```

Can someone tell me if I need to use both `float: left;` and `display: inline;`. I am bit confused as they both seem to do the same thing.

Answer: 
Actually there is no need to use both the properties together, but as you are using two classes having respective properties is fine, let me explain you here, if you use `display: inline;` ONLY, than first you need to see how `inline` is it different from `float`

[Inline Elements](http://jsfiddle.net/Qbt4h/)

[Floated Elements](http://jsfiddle.net/Qbt4h/1/)

Now, yes, am aware that `span` are already `inline` elements, but if you see, when I use `float`, it makes an `inline` element behave like an `inline-block`, it applies margins at `top` and `bottom` as well, while `display: inline;` won't.

---

Another difference is `float` is in general different positioning, when you float an element to left or right, it creates an empty space besides, which makes element below it to shift besides that.

[Floated Example](http://jsfiddle.net/Qbt4h/4/)

While `display: inline;` won't

[Inline Example](http://jsfiddle.net/Qbt4h/3/)

See the difference? So it depends on you what suits best to your needs, just make sure you `clear` your floating elements by using `overflow: hidden;` or any clearfix available out there else you will see some unexpected behavior of your layout.

---

Conclusion: Even if you use `display: inline;`, your element will be a `block` level element and `inline`, so there's no need to use `display: inline;`
With `display` you are changing the display type of the element.

With `float` you are setting position for that element.

[**Here**](https://stackoverflow.com/a/8971358/1611349) is an answer with practical explanation why would you prefer `float` for positioning.