High collapse and collapse
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<! -- The viewport meta tag is used to improve the presentation and behavior of the samples
On iOS devices -->
<Meta name = "viewport" content = "initial-scale = 1, maximum-scale = 1, user-scalable = no"/>
<Title> </title>
<Style>
Html, body {height: 100%; width: 100%; margin: 0; padding: 0 ;}
. First {
Margin: 20px;
Background: lightgreen;
Border: 2px solid lightgreen;
/* Display: inline-block ;*/
/* Overflow: hidden ;*/
/* Float: left; */if this method is selected, you must add clear: both to the next element of this element,
/* Position: absolute ;*/
}
Ul {
Overflow: hidden;
Margin: 10px;
Background: lightblue;
Width: 100px;
Height: 200px;
Float: left;
}
Li {
Margin: 25px;
}
</Style>
</Head>
<Body class = "claro">
<Div class = "first">
<Ul>
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
</Ul>
<! -- <Div style = "clear: both"> </div> -->
</Div>
</Body>
</Html>
When the height and width of the parent element are not set. Then its height will collapse to zero, provided that it only contains floating elements. It is very easy to solve the problem of height collapse. It can be implemented by floating parent elements, clearing methods, and so on.
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
