Recently in the project several times encountered this problem, the feeling is floating caused, although with <div style= "Clear:both" ></div> solved, but I do not particularly understand, but also on the Internet to check the relevant content, is because to Li set the floating It is out of the current normal flow of documents, so there is no way to open the height of the outer ul.
Take the following code for example, there are actually several solutions, I use this is not the simplest.
<! DOCTYPE HTML >
<meta charset= "Utf-8" >
<title> after setting float float property for Li, the issue of the outer UL cannot be open. </title>
<style type= "Text/css" >
ul{
border:1px solid #000;
width:200px;
Height:auto;
margin-top:100px;
}
li{
Float:left;
List-style:none;
margin-left:10px;
}
</style>
<body>
<ul>
<li> Monday </li>
<li> Tuesday </li>
<li> Wednesday </li>
<li> Thursday </li>
<li> Friday </li>
<li> Saturday </li>
<li> Sunday </li>
</ul>
</body>
The above code shows the result, the frame of the UL becomes a line, is not open,;
But the effect I expect is this:.
If the contents of UL inside is fixed, to UL plus height can solve the problem, but the project encountered in Li is dynamically generated, the number can not be determined, so the height can only be set to auto, this time in fact, as long as the outer UL also add floating properties can solve the problem, but sometimes the layout will be affected, Can only be based on the situation, in addition to UL plus Overflow:auto/hidden can also solve the problem, if you want to be compatible with IE6, followed by "Zoom:1" or "width:100%" can be.
Finally, there are 4 ways to summarize:
The 1th method : in the HTML code to the last Li after the empty element cleared floating, div can be changed to P or other. Specific example:
The 2nd method : Set a fixed height to ul. Specific example:
The 3rd method : Set the overflow property to UL, or it can be overflow:hidden. Specific example:
The 4th method : To the UL plus floating properties, can be replaced with float:right, but it is likely that the layout will be affected. Specific example:
Everyone should use different methods, I think the third method is the simplest, the later use of this. Haha, this will come home from work ~ ~
After setting float float property for Li, it is not possible to open the outer UL issue.
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
