What is the standard behavior of float: right after float: left?

Suppose there are such HTML tags:

​<span>
  <span id='s1'>Text 1</span>
  <span id='s2'>Text 2</span>
</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And css style:

​#s1 {
  float: left;
}
#s2 {
  float: right;
}

What is the standard display behavior?

In some browser I see

Text 1 Text 2

In some version of IE, I see

Text 1

         Text 2

It seems that float: the right range shifts to the next line.

+5
source share
2 answers

Modern browsers will correctly calculate the width of smoothed floats and make them on the same line if the width of the floats does not exceed the width of the parent elements. I believe this is the right behavior for rendering.

Internet Explorer (5, 6, 7) , , , .

+4

<span> . , , , <span> , .

0

All Articles