Many of the front-end engineers were asked questions about float at the interview.
For example: the P element of the two child elements p are float:left, the outer p will become no height, at this time what to do?
The usual solution is to add an after pseudo-element to the element in the layout flow and set it to Display:block and Clear:both.
P:after {content: "";d Isplay:block;clear:both;}But I accidentally found out today, the original Overflow:hidden, also will open P Ah! As follows:
Long knowledge.
<body> <p> <p>i am floated</p> <p>so am I</p></p><style >p { Overflow:hidden;} p { float:left;} </style>Deep
Let's go further and look at the following example:
Write the following code to see the effect
HTML code:
<p class= "Content" > <p class= "P1" > </p></p>
CSS code:
. content { border:1px solid red; } . P1 { width:100px; height:100px; Background-color:cyan; }The effect is as follows:
Add a P1 to the content and set the size and color of the content label's border and P1 label, and see the content tag wrap up the P1 tag. And also prop up the size of the content tag
However, when we set the P1 to the right floating property
. p1 { width:100px; height:100px; Background-color:cyan; Float:rightright; }will become this way:
The P1 tag does align right, but does not prop up the height of the content tag.
Don't worry, we need to set a property that is to give the content tag, add the Overflow property
Add attribute (Overflow:hidden;)
. content { border:1px solid red; Overflow:hidden; }Once added, the effect becomes the same
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
