CODEWITHSUNDEEP
htmlcsslayoutcss-float
Cu1ture
Cu1ture

Reputation: 1283

Why do block elements go behind a float and inline go around?

I am finally starting to understand floats in CSS but I am stuck on one part.

I understand floating an element takes it out of the flow of the document so elements after it would render 'underneath' it as it is not visible to them.

However I am having difficulty understanding why inline elements are aware of the float and flow around it if it has been taken out of the document flow?

Upvotes: 9

Views: 3126

Answers (3)

Jaqen H'ghar
Jaqen H'ghar

Reputation: 16804

Why inline elements flow around float?

From MDN:

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

float origins:

The practice of flowing text around an image goes back a long, long time. That's why the ability was added to the Web starting with Netscape 1.1, and why CSS makes it possible using the property float.

Complex Spiral Consulting

So float was designed to solve this particular problem:

Consider This figure:

And the markup structure that produced it:

<p>
 ...text...
 <img src="jul31-03-sm.jpg" height="200" border="0" class="picture">
 ...text...
</p>
<p>
 ...text...
</p>

The floated image is sticking out of its containing element. We can see this more clearly by adding borders to the paragraphs:

Using float makes it possible for the paragraphs to ignore the image, while the text wrap around it.

Upvotes: 7

Michael Benjamin
Michael Benjamin

Reputation: 371193

There are rules governing the relationship between floated elements, block elements and line boxes.

These rules are defined in the CSS Visual Formatting Model.

In particular, note this section from the specification:

enter image description here

The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. The line boxes to the right of the float are shortened due to the float's presence, but resume their "normal" width (that of the containing block established by the P element) after the float.

In other words, block boxes, such as a p, will flow behind the floated element. But the line boxes in the p, which wrap the text, respect the presence of the floated element. These are just the rules, as defined in the spec.

Upvotes: 3

Saurabh Sonawane
Saurabh Sonawane

Reputation: 951

Float element is designed so that it always floats to left or right side of the parent element. But it doesn't cover the content part. Content part always follows float element (Like you said).

Basically, there is a quite small difference between display:block and display:inline.

display:block represents block or lets say container which wraps a complete parent div horizontally and has margin and padding properties.So, it may behave as a parent container, and so float covers its part.

display:inline subjects to content not a container. It dosen't have a padding or margin properties so it is considered to be a part of a content. That's why it follows float element. Even if you add some content in display:block element, there you will see that content is following float element.

Upvotes: 1

Related Questions