7
I would like to know the advantages and disadvantages of using the properties float and display with the value inline-block. I know that both work to align elements, but I try to know the pros and cons of each.
inline-block can replace the float? 5
Float serves for vc to "float" elements side by side. A div is a block element and functions as a box model, that is it takes up 100% of the screen width and accepts values from margin, padding and border. Hence, by div occupy 100% of the screen width it does not let others divs to stand by his side, to "correct" that was used the float
However, use float has a number of problems, the float causes a parent element to lose the reference of the box model of the son who has float, to prevent this behaviour, the technique of clearfix as you can read more here: What This CSS Code Does ?
With Float / No Clearfix
With Float / With Cleatfix
Then you may think: "So I’m gonna use display:inline-block!" In that case you’ll fall into another trouble... That’s the whitespace-only text node. That strange name is the space that appears by default on elements that are inline, because when it takes on the scope of inline or inline-block the element inherits some features of text, ie, it is as if each element behaves like a word in a text, then by default between a word and another we have a "space", which is represented by the whitespace-only text node as you can get informed in this question: How to remove "whitespace-only text Node" that appear in HTML from the DOM
With display:inline-block and the text-nodes spaced out the elements
Let’s see some examples to better understand
Take a look at this example of divs with display:inline-block within a container, notice that there is a white "fucking margin" between a block and another:
.container {
border: 1px solid black;
}
.container div {
display: inline-block;
width: 50px;
padding: 50px;
background-color: #f00;
}<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>Now the same example using float, Notice that the father who has the black border now no longer recognizes the box model of children with float
.container {
border: 1px solid black;
}
.container div {
float: left;
width: 50px;
padding: 50px;
background-color: #f00;
}<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>Now let’s see an option with display:flex, note that we have no side effect on divs or in the container :), everything is aligned, without blank spaces and the father still recognizes the size of the child.
.container {
border: 1px solid black;
display: flex;
}
.container div {
width: 50px;
padding: 50px;
background-color: #f00;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>Now for you to better understand the display:inline-block. With it the element starts to accept values of box model as margin and border. Notice the code below that even though I put margin on span he does not "push" what is above or below, already the span with inline-block pushes! As you can see in the code below, and in this question: Why the Edge only moves the element Horizontally and Not Vertically?
<span>Lorem ipsum dolor sit amet.</span><br>
<span>Lorem ipsum <span style="margin:15px; border: 10px solid red;">display inline default</span> sit amet.</span><br>
<span>Lorem ipsum dolor sit amet.</span>
<br><br>
<span>Lorem ipsum dolor sit amet.</span><br>
<span>Lorem ipsum <span style="display:inline-block; margin:15px; border: 10px solid red;">display inline block</span> sit amet.</span><br>
<span>Lorem ipsum dolor sit amet.</span>Browser Support
About the Float and the Display:inline-block both are widely supported, IE8 for example already accepted the two properties as you can see here: https://caniuse.com/
Already the Flex is more modern and only works of IE10+ https://caniuse.com/#search=flex
1
All right, let’s go! The estate float according to your documentation is used for you to align images next to a text, either right or left, like newspaper, you know?
Already the display: inline-block is for you to leave an element to work as much as a block or line element.
Both are accepted by browsers.
Many people think that these properties are used to create layout, but this is totally outdated nowadays, in the past it was used because there was no way in CSS for this, so they created layout using float and clearfix would be a gambiarra to organize the break, you know?
If your question is to create layout, remember: these two tags are not for that, study Flexbox and GRID.
I hope I’ve helped :)
Browser other questions tagged css css-display
You are not signed in. Login or sign up in order to post.
Excellent explanation my dear.
– fernandosavio
@fernandosavio was worth young! I tried to be as didactic as possible :)
– hugocsl
I’ve been working with it for years, and there are certain things that you don’t even know because it works, you just know it works. It is good to stop to see good explanations and practical examples.
– fernandosavio
@fernandosavio "I don’t know, I just know it was like that..." haha, this is very normal with CSS, but after you understand some principles is like Neo entering the Matrix! Much of what I write here I learned by reading other answers and asking, including two of my questions I used to answer this rss. We are always learning something new, this is the grace!
– hugocsl