Home > Developer > Web Develop
Let's just throw an example.
After running the following example, you can see the output as follows.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>Div{width:100px;Height:100px;Background-color:Red;font-size:50px; }P{float: Left;Background-color:Yellow;margin:50px; } </style></Head><Body> <span> <P>1</P><P>2</P><P>3</P><P>4</P><P>5</P><P>6</P><P>7</P><P>8</P><P>1</P><P>2</P><P>3</P><P>4</P><P>5</P><P>6</P><P>7</P><P>8</P> </span> <Div>123</Div> </Body></HTML>View Code
You can see the P element floating, the back of the div to separate, the background of the div is not seen floating elements, so the upper left corner, and the DIV content 123 because you can see the floating element, so it is placed in a row after the floating element display. In other words, the presence of a floating stream causes the div to wrap "123" as a "".
In order to unify the block and content of Div, it is necessary to eliminate the floating, eliminate the floating method, please see an article.
Let's look at a strange phenomenon. The code and effects are as follows. Reason I still in the inquiry, have the understanding can leave a message first.
And as the window decreases, content 123 shows less and fewer.
View Code
The strange phenomenon caused by CSS float float
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
