Discussion on extension of IE floating border BUG_Experience exchange

Friends who are familiar with the CSS box model believe that the IE double floating border BUG will be familiar (if you are not very clear, you can click it). This BUG will only be generated in the first floating element of the floating row, so if the first Floated elements will not have double spacing without using outer margin. However, I recently discovered that IE has an extension of this BUG.

Problem
In the following example, the first floating element outer patch margin of all floating rows in all figures is 0

#The margin-left of left2 is 50px and the display is normal

When the margin-left of #left2 is 100px, it displays normally

Then we increase the margin-left of #left2 to 150px. It’s starting to look a little strange.

We change the width of #left1 to 110px, while the margin-left of #left2 continues to remain 150px

Seeing the above phenomenon, we found that IE really has a personality. How is this personality man calculated? In fact, if you look carefully, it is not difficult to find that when the margin-left of #left2 is less than or equal to the width of #left, the display is normal, but once it is greater than the width, problems will occur. The actual left border distance of #left2 is equal to #left1.width (#left2.margin -left - #left1.width)*2
Solution
It is actually very simple to solve this BUG. Just like the double distance solution, set #left2 to {display:inline}. OK.
Summary
The key is why I just said it is an extension of the BUG, ​​because whether it is a double BUG or a BUG of this wrong algorithm, it will only appear once. Maybe you haven’t understood it yet, then say this:

1. If the margin-left of #left1 is greater than 0, then the left border of #left1 will have a double distance BUG, ​​and the margin-left of #left2 will not be larger than the width of #left1. Something will go wrong;

2. If the margin-left of left1 is equal to 0, and the margin-left of #left2 is larger than the width of #left1, then there will be a bug in the wrong algorithm on the left border of #left2, and then there will be a #left3, even if it is If the margin-left of #left3 is as large as the width of #left2, there will be no mistake;

3. If the margin-left of left1 and left2 are both equal to 0, and there is #left3 after that, and the margin-left of #left3 is greater than (the sum of the widths of #left1 and #left2), then #left3 An incorrect algorithm BUG appears on the left border. Its actual left border is (#left1.width left2.width) (#left3.margin-left-#left1.width-left2.width)*2, and then all floats after #left3 No element will go wrong;

The above are all on the left as an example, the situation on the right is the same