Extension of IE floating boundary BUG

Friends who are familiar with the CSS box model believe that they will not be unfamiliar with the IE Double Floating boundary BUG (if you are not very clear about it, you can click it). This BUG will only generate the first floating element in the floating row, so if the first floating element does not use the external patch margin, there will be no double distance. However, I recently discovered that Internet Explorer has extended this BUG.

Problem
In the following example, the patch margin of the first floating element on all floating rows of the graph is 0.

# The margin-left value of left2 is 50px.

When the margin-left of # left2 is 100px, the display is normal.

Then we will increase the margin-left of # left2 to 150px. It's a bit strange.

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

Seeing the above phenomenon, we found that IE really has a character. In the end, how is this character calculated by male? In fact, it is not difficult to observe carefully. When the margin-left of # left2 is smaller than or equal to the width of # left, it is displayed normally. However, once it is greater than, problems may occur, it actually # The left boundary distance of left2 is equal to # left1.width + (# left2.margin-left-# left1.width) * 2
Solution
It is actually very easy to solve this BUG. Just like the solution of double distance, set # left2 to {display: inline.
Summary
The key is why I just said it is an extension of a BUG, because both the double BUG and the BUG of this incorrect algorithm only occur once. Maybe you still don't understand, so say:

1. if the margin-left of # left1 is greater than 0, the # left1 left boundary generates a BUG of double distance, even if the margin-left of # left2 is greater than the width of # left1, no error occurs;

2. if left1's margin-left is equal to 0, # left2's margin-left is large and # left1's width, then the # left2 left boundary has an incorrect algorithm BUG, followed by a # left3, even if the margin-left value of # left3 is large and the width of # left2 is not incorrect;

3. if the margin-left values of left1 and left2 are both equal to 0, then there is another # left3, while # the margin-left value of left3 is greater than (# The sum of the width of left1 and # left2 ), then # The left boundary of left3 shows an error algorithm BUG. The actual left boundary is (# left1.width + left2.width) + (# left3.margin-left-# left1.width-left2.width) * 2, then # all floating elements after left3 will not go wrong;

The above uses the left side as an example. The situation on the right side is the same.