I. Floating elements automatically change Block-level elements
First, let's talk about the differences between block-level elements and intra-row elements. To put it simply, block-level elements occupy only one row. You can set the width and height as well as margins. The intra-row elements do not exclusively occupy one row, setting the width and height of the line spacing will not take effect. Common block-level elements include: h1 ~ H6, p, div, ul, and table. Common row elements include span, a, input, and select.
Sample code:
<Div style = "height: 200px; width: 200px;">
<Span style = "float: left; width: 150px; height: 150px; margin: 5px; padding: 5px;
Border: solid 1px red; background-color: olive; "> floating element span </span>
</Div>
<Div style = "height: 200px; width: 200px;">
<Span style = "width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red;
Background-color: olive; "> floating element span </span>
</Div>
The effect is as follows:
II. Non-floating elements after floating elements
If the elements behind the floating element are non-floating row elements and overlap is generated due to positioning, the line element border, background, and content are displayed on the floating element, if a non-floating block-level element is behind the floating element and overlaps with the element after positioning, the border and background of the block-level element are displayed below the floating element, only when the content is not displayed under the floating element.
The sample code is as follows:
<Div style = "width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;">
<Div style = "float: left; width: 250px; height: 250px; border: solid 1px aqua; background-color: gray;
Margin: 10px 0 0 10px; ">
Floating div </div>
<Div style = "background-color: red; border: solid 1px green; width: 300px; height: 150px;">
Div following the floating element </div>
<Span style = "background-color: red; border: solid 1px green; margin: 0 0 0-50px;">
Span following the floating element </span>
</Div>
The effect is as follows:
As shown in the figure, the background and border of the div behind the floating div are under the pressure, but the content is not. The span is displayed on the floating div as a whole.
However, in ie6, the effect is weird, as shown in the figure:
Instead of a non-floating div, the floating element blocks the span.
