Example: Float causes the element to become an in-row block element-display: inline-block

Question: What is the width and height of the span tag?
A. width = 0px, Height = 0px
B. width = 400px, Height = 200px
C. width = 100px, Height = 50px
D. width = 0px, Height = 200px

<DivStyle ="Width: 400px; Height: 200px;"><SpanStyle ="Float: Left; width: auto; Height: 100%;"><IStyle ="Position: absolute; float: Left; width: 100px; Height: 50px;"> hello</I></Span></Div>
 

Effect:
Div normal width and height
SPAN {width: 0; Height: 200px}
I {width: 100px; Height: 50px}

• All elements pass throughFloatingChangeIntra-row block elements-- Span is not a block-level element and does not support width and height. After float, it supports width and height,Height: 100%That is, 200px. Absolute positioning in I, separated from the document stream, does not occupy the parent space, so SpanWidth: 0;
• The above analysis: In W3C, float will generate block-level boxes for elements, which can be understood as inline-block. However, by default, blank characters are generated between inline-block elements, but not between flaot elements. Although float is out of the Document Stream, div is still the parent element of span, soHeight: 100%;That is, the height of the parent element div is PX. I setPostion, Does not affect the parent element, so the spanWidth: 0px;

Liang haijie _ Irv
Link: https://www.jianshu.com/p/99a4e1434dd3
Source: Simplified book
The copyright of the simplified book belongs to the author. For any form of reproduction, please contact the author for authorization and indicate the source.

Example: Float causes the element to become an in-row block element-display: inline-block