Does the float property affect inline elements differently than block elements?

Frequently Asked Questions CSS FAQ
1

Question

Does the float property affect inline elements differently than block elements?

Answer

When using the float property on display: inline; elements, the display value will be computed to block instead (display: block;). This means that display: inline; and display: block; elements will behave the same way when a float property is added to the element.

2 Likes
2

Hi! I’m seeking clarification. I tested out some code using paragraph tags. When I set the float: left property, all of the paragraph blocks that are normally spaced out became inline. Does this mean that by using float: left, the paragraph blocks now become inline? It seems the opposite of the answer. Am I reading this wrong? The way I see it " When using the float property on display: block; elements, the display value will be computed to inline "
Thanks in advance!

3

No, they are still blocks. What happens is they are taken out of normal flow so that adjacent content can float around them. They appear inline since they all have the same relative reference, top/left, and multiple consecutive objects (with float) will have their own normal flow, as it were.

The object with the float property is not floating, per se, as mentioned above. Shrink and expand the window with a mix of objects that are out of normal flow, and a bunch of text (lorem ipsum is handy for doing layouts).

Notice how the objects will drop down to the next line when the window is narrowed.

Some old school tips for working with the float property:

  • always specify a fixed width in pixels and don’t set the height
  • always give those objects a parent; never use directly in the body
  • be sure to clear floats so they don’t impose on other content
  • write the margin on the object, not the floating adjacent content
  • don’t use padding
  • use simimlar content with the same height

Nothing is carved in stone, mind.

3 Likes
4

Thank you! I was confused but this helped!

1 Like
5

I noticed there are three CSS elements for the contact-btn:

.contact-btn {
float: right;
}

.contact-btn a {
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;

}

.contact-btn a:active {
position: relative;
bottom: 2px;
}

What do all of these do, aside from the first .contact-btn being the button itself?

6

The latter two are known generically as combinator selectors. The white space between the class selector and type selector tells CSS that a is a child element. Same applies to the latter with addition of a pseudo-class to a.