After setting the float attribute to li, the outer ul cannot be opened.

I have encountered this problem several times in the project recently. I feel that it is caused by floating. Although I solved it with

, I don’t really understand it, and I found it on the Internet. After checking the relevant content, it is because after setting the float for li, it breaks away from the current normal document flow, so there is no way to increase the height of the outer ul.

Take the following code as an example. There are actually several solutions. The one I used is not the simplest.

• Monday


• Tuesday


• Wednesday


• Thursday


• Friday



• Sunday

The above code displays the result as shown in the figure. The border of ul becomes a line and is not stretched.

；

But the effect I expect is this:

.

If the content in ul is fixed, adding the height to ul can solve the problem. However, in the projects encountered, li is dynamically generated and the number cannot be determined, so the height can only be set to auto. At this time, in fact, just give Adding floating attributes to the outer ul can solve the problem, but sometimes the layout will be affected and can only be determined according to the situation; in addition, adding overflow:auto/hidden to the ul can also solve the problem. If you want to be compatible with ie6, add it later Just set "zoom:1" or "width:100%".

Finally, to summarize, there are a total of 4 methods:

The first method: Add an empty element after the last li in the html code to clear the float. The div can be replaced with p or other. The details are as follows:

Method 2: Set a fixed height to ul. The details are as follows:

The third method: Set the overflow attribute to ul, which can also be overflow:hidden. The details are as follows:

The fourth method: Add a floating attribute to ul. You can change it to float:right, but the layout is likely to be affected. The details are as follows:

The method used by everyone should be different. I think the third method is the easiest, and I will use this method in the future. Haha, I will go home from get off work now~~