Regarding the issue of li floating! Solve_html/css_WEB-ITnose

First, take the picture above,

Add a picture to li, and then set the first float, the effect is as above,,,, but,,
After adding width and height to li, it becomes like the above, Why is this, please explain?

Reply to discussion (solution)

If you want to implement two columns, then ul sets the width of two li, and all li float Just

li is a block tag, which is meant to occupy one line. For the first one, you used float:left, which floats to the left to make way for the right position. The second li takes up the remaining space. , the second one does not float, it just occupies one line, so the last one starts on another line. The second case: li does not float, each occupies one line, so they all need to be wrapped.

After float is set, it breaks away from the normal flow, and the second li element moves up

After li sets the width, because #one has the same width as the following li, it is equivalent to the second li block-level element The leftmost part is occupied by #one, that is, the width of the first line is full, and the content in it can only be wrapped and displayed on the second line; when the width is not set, the width of #one is only the width of the a character, and the second The default width of each li is 100% UL width

After the float is set, it breaks away from the normal flow, and the second li element moves up

After the li width is set, because #one and the following The li width is the same, which is equivalent to the leftmost part of the second li block-level element being occupied by #one, that is, the first line of width content is full, and the content in it can only be wrapped and displayed on the second line; and when the width is not set , the width of #one is only the width including the a character, and the width of the second li defaults to 100% UL width

I understand the first one, but I still don’t know why I set the width. , its effect is different, (because #one has the same width as the following li, which is equivalent to the leftmost part of the second li block-level element being occupied by #one) I can't understand this sentence, please give me an answer! Thank you

After float is set, it breaks away from the normal flow, and the second li element moves up

After li sets the width, because #one has the same width as the following li , which is equivalent to the leftmost part of the second li block-level element being occupied by #one, that is, the first line of width content is full, and the content in it can only be wrapped and displayed on the second line; and when the width is not set, #one's The width is only the width including the a character. The second li width defaults to 100% UL width

I understand the first one, but I still don’t know why it has the effect after setting the width. It's different, (because #one has the same width as the following li, which is equivalent to the leftmost part of the second li block-level element being occupied by #one) I can't understand this sentence, please give me an answer! Thank you

When the browser renders, the floating elements are superimposed on the normal flow elements. The width of the second li element is only 120px and the height is adaptive. The width of #one is also 120px. When it floats to the left end, the content of the second li element will be positioned close to the right end of #one. If there is not enough space, it can only go down. If you set the width of the second li element to 120px, you may understand

More often than not, there is no need to worry too much about why this is the case, because doing so itself has compatibility issues. For example, the effect of text surrounding images is inconsistent in different browsers. There is no solution. The only way is to avoid similar layouts when doing it

Another example, two block levels If elements want to be displayed in the same row, many people will use the method of setting float first and pushing the second one up. However, this method will produce inexplicable white gaps under IE6/7 when certain conditions are met, and there is no way to solve it. Floats can only be set uniformly

If you really want to know why this is the case, I think you have to understand it from the underlying rendering mechanisms of major browsers. Even if you understand it, you will avoid similar layouts.