The experimental code is as follows:
Tip: You can modify some code first and then run 1. Test in IE and FF, and only text overflow occurs in IE.
Note: Text overflow caused by comments is a bug of IE.
2. Remove float:left; in <div style=float:left></div>, and you will find that the extra word "pig" is missing and the page is displayed normally.
Tip: You can modify some code first and then run the same float:right; in <div style=float:right;width:400px>. The extra pig word also disappears and the page is displayed normally.
Tip: You can modify some code first and then run the instructions: text overflow caused by comments is related to block floating.
3. Transfer the comments to the front of <div style=float:left></div>, the excess pig word disappears and the page is displayed normally.
Tip: You can modify some code first and then run and transfer the comments to <div style=float:right;width:400px>↓ This is the extra pig</div>. The extra pig word also disappears and the page is displayed normally.
Tip: You can modify some code first and then run the instructions: the text overflow caused by comments is related to its location. (It can be understood in conjunction with point 2)
4. Remove width:400px in <div style=float:right;width:400px>, the excess pig word disappears, and the page is displayed normally.
Tip: You can modify some code first and then run the instructions: 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 1 comment, 1 word will appear; when 2 comments, 3 words will appear; when 3 comments, 5 words will appear...
Tip: You can modify some code first and then run it
Tip: You can modify some code first and then run it
Tip: You can modify some code first and then run it
Tip: You can modify some code first and then run it. We will get a formula from the above rule: the number of words overflowing text = the number of comments * 2-1. The number of words here is true when there are Chinese or English numbers.
When the overflowing text word count is greater than the text word count, the text block will disappear.
Tip: You can modify some code first and then run the instructions: the number of overflowing words is related to the number of comments.
From the tests of 1 and 2, please do not place comments between 2 floating blocks.
Solution:
1. No comments are placed. The easiest and fastest solution, hehe...
Tip: You can modify some code first and then run 2. Do not place comments between 2 floating blocks.
Tip: You can modify some code first and then run 3. Include the text block between the new <div></div>, such as: <div style=float:right;width:400px><div>↓ This is the extra pig</div></div>.
Tip: You can modify some code first and then run 4. Remove the fixed width of the text block, which has similarities with 3.
Tip: You can modify some code first and then run the above analysis and solution that may be inadequate or inaccurate. Welcome to discuss and correct me.