Web page comments cause text overflow in IE

The experimental code is as follows:

Tip: You can modify part of the code first and then run 1. Test in IE and FF. Text overflow only occurs in IE.
Note: Comments causing text overflow is a bug in IE.
2. Remove the "float:left;" in <div style="float:left"></div>, and you will find that the extra word "pig" disappears and the page is displayed normally.

Tip: You can modify part of the code first and then run the program to remove the "float:right;" in <div style="float:right;width:400px">. The redundant "pig" character will also disappear and the page will display normally.

Tip: You can modify part of the code before running. Note: The text overflow caused by comments is related to the floating of the block.
3. Move the comment to the front of <div style="float:left"></div>, the extra "pig" character disappears, and the page displays normally.

Tip: You can modify part of the code first and then run the program to move the comment to under <div style="float:right;width:400px">↓This is the extra pig</div>. The extra word "pig" will also disappear and the page will display normally.

Tip: You can modify part of the code before running. Note: Comments causing text overflow are related to their position. (Can be understood in conjunction with point 2)
4. Remove the “width:400px” in <div style="float:right;width:400px">, the extra word “pig” disappears, and the page displays normally.

Tip: You can modify some codes before running. Note: The text overflow caused by comments is related to the fixed width of the text block (whether it is an absolute value or a relative value).
5. Increase the number of comments: when there is 1 comment, 1 more word will be added; when there are 2 comments, 3 more words will be added; when there are 3 comments, 5 more words will be added...

Tip: You can modify some of the code before running

Tip: You can modify some of the code before running

Tip: You can modify some of the code before running

Tip: You can modify part of the code first and then run it. We will get a formula from the above rules: the number of overflow words = the number of comments * 2-1. The number of words here is valid for Chinese or English numbers.
When the overflow text is larger than the text, the text block will disappear.

Tip: You can modify part of the code before running. Note: The number of overflow words is related to the number of comments.
From the tests 1 and 2, we know that comments should not be placed between two floating blocks.
Solution:
1. No comments are placed. The simplest and quickest solution, hehe...

Tip: You can modify part of the code before running. 2. Do not place comments between two floating blocks.

Tip: You can modify some codes before running. 3. Enclose the text block between new <div></div>, such as: <div style="float:right;width:400px"><div>↓This is the extra pig</div></div>.

Tip: You can modify some codes first and then run 4. Remove the fixed width of the text block, which is similar to 3.

Tip: You can modify part of the code before running. The above analysis and solutions may be inadequate or inaccurate. Welcome to discuss and correct them.

<<: Detailed explanation of the use of ElementUI in Vue

>>: The docker container directly runs to obtain the public IP operation through ping