CSS style float caused by floating "collapse" problem solving method

What is CSS Float?

Definition: The Float property defines the element to float to the left or right. Historically, this property has always been applied to images, so that text surrounds the image, but in CSS, any element can float. A floating element generates a block-level element, regardless of its own element. After the element object has the float property set, it will no longer occupy a single row on its own. A floating block can move left or right until its outer edge touches the border of the box containing it or another floating block.
The Fload property has four values available: left and right float elements in their respective directions, None (the default) causes the element to not float, and Inherit will get the float value from the parent element.
Let's learn more about the following CSS float

The usefulness of 1.Float

In addition to simply wrapping text around a picture, floating can be used to create all page layouts.

Floating is also useful for small layouts. For example, this small area of the page. If we use a float on our little avatar picture, the text in the box will automatically adjust the position when the image size is resized:

The same layout can be achieved by using relative positioning in the outer container and then using absolute positioning on the avatar. In this way, the text is not affected by the size of the avatar image, and does not change depending on the size of the avatar image.

Program Code
CSS styles to use
body{margin:0px; padding:0px; text-align:center; font:arial, Helvetica, Sans-serif; font-size:12px;}
div,p,ul,li,h2,h3,h4,h5{padding:0px; margin:0px;line-height:22px;}
h1{font-size:14px;}
Body >div{text-align:left; margin:10px Auto;}
#box {width:900px; text-align:left;}
. box1{width:370px;border:1px solid #f00;}
. box3{border:1px solid #f00;}
. box2{width:370px;border:1px solid #f00;}
. Box2:after{display:block;clear:both;content: ""; visibility:hidden;height:0;}
. box1_1{width:100px; height:70px;border:1px solid #6CF;}
. clear{Clear:both; height:0px; width:0px; font-size:0px; line-height:100%;}
. fl{Float:left;}
. fr{Float:right;}
. Hidden{overflow:hidden;}
span{color: #f00; font-weight:bold;}
. mar{margin-left:20px;}
. inmar{display:inline; margin-left:20px;}
. box1_2{width:200px; float:left; height:100px;}
. box1_3{width:150px; height:100px; margin-left:200px; background-color:red;}
. box1_4{width:200px; float:left; height:100px; background-color:green;margin-right:-3px;}
. box1_5{width:150px; float:left; height:100px; background-color:red;}
. box2_1{margin-bottom:10px;float:left;width:80px; height:70px;border:1px solid #f00;}
. box2_2{float:left;width:80px; height:70px;border:1px solid #f00;}
. padbot{padding-bottom:10px;}

2. Float floating element does not occupy normal document flow space

Because the floating block is not in the normal flow of the document, the block in the normal flow of the document behaves as if the floating block does not exist.
• The following is a 3 div that is displayed in the browser if it is not added to float

Code:

<div>

<div><span>块1</span></div>

<div><span>块2</span></div>

<div><span>块3</span></div>

</div>
• Block 1 floats to the right, leaving the document stream and moving right until its right edge touches the right edge of the containing block. Such as

Code:
<div>

<div><span>块1</span> float:right </div>

<div><span>块2</span></div>

<div><span>块3</span></div>

</div>
• Block 1 floats to the left, leaving the document stream and moving left until its left edge touches the left edge of the containing block; IE8 and Firefox do not occupy space because it is no longer in the document flow, so it actually covers block 2, so that block 2 disappears from view. The contents of Block 2, however, show where Block 2 is located when Block 1 is not floating. The Block 2 in IE6 and IE7 that immediately follows the floating element block 1 will also float. Such as

IE8 and Firefox

IE6 and IE7

Code:
<div>

<div><span>块1</span> float:left </div>

<div style="background:#FCC;">background:#FCC<span>块2</span></div>

<div><span>块3</span></div>

</div>

3. Floating "collapse"

• One of the more puzzling things about using float (float) is how they affect the parent element that contains them. If the parent element contains only floating elements, and the parent element does not set the height and width. Then its height will collapse to zero. This problem can be difficult to notice if the parent element does not contain any visible backgrounds, but this is a very important issue. Here we can call it "collapse." Such as

Code:
<div>

<div><span>块1</span> float:left</div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

</div>
There are three ways to solve a "collapse" problem:
1. Before the end of the parent element using the float element, add a div with a height of 0 width to 0 and a clear:both style as

Code:
<div>

<div><span>块1</span> float:left </div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

<div></div>

</div>
2. Add Overflow:hidden with the parent element of the float element;

Code:
<div>

<div><span>块1</span> float:left </div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

</div>
3. Use the after pseudo-object to clear the float as

Code:
<div>

<div><span>块1</span> float:left </div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

</div>

4. IE6 Bilateral distance issues

· IE6 Bilateral distance problem: a left floating (float:left) element is placed into a container box (box), and the left border (margin-left) is used on the floating element to generate double margins within IE6. Such as

IE7, IE8 and Firefox

IE6

Code:
<div>
<div><span>块1</span> float:left marin_left:10px; </div>

<div><span>块2</span> float:left marin_left:10px; </div>

<div><span>块3</span> float:left</div>

</div>
This bug only occurs when the direction of the floating and floating elements appears between the floating element and the inner edge of the container box, after which any floating elements with similar boundaries do not appear double-edged. Only the first floating element of a particular floating line encounters this bug. As in the case of left, the double border also mysteriously shows in the same way right.

Solve IE6 Bilateral distance problem: display:inline; Make floating ignore as

Code:
<div>

<div><span>块1</span>float:left; marin_left:10px; display:inline; </div>

<div><span>块2</span> float:left marin_left:10px; </div>

<div><span>块3</span> float:left</div>

</div>

5.ie6 text generates 3 pixels of bug

• Floating IE6 text generates a 3 pixel bug when the text that is next to the floating element is magically kicked out 3 pixels, as if the floating element is surrounded by a strange force field. Such as

Firefox, IE7, IE8

IE6

Code:
<div>

<div>float:left;width:200px; height:100px; </div>

<div> margin-left:200px; width:150px; height:100px; </div>

</div>
Solve floating IE text generate 3 pixel problem there are two methods below
1. The left object floats, the right side uses the outer patch left margin to locate as
Firefox, IE7, IE8, IE6

Code:
<div>

<div>margin-right:-3px; float:left;width:200px; height:100px; </div>

<div>width:150px; height:100px; </div>

</div>
2. The left object floats, the right object also floats as

Firefox, IE7, IE8, IE6

Code:
<div>

<div> float:left; width:200px;height:100px; </div>

<div> float：left;width:150px; height:100px; </div>

</div>

6.ie6,ie7, Bottom margin bug

· IE6,IE7, the bottom margin bug is that when a floating parent element has a floating child element, the bottom margin of those child elements is ignored by the parent element. Such as

Firefox

IE6, IE7

Code:
<div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

</div>
Fix the bottom margin bug in Ie6,ie7: Replace with the parent element's bottom padding (padding). Such as

Firefox, IE7, IE8, IE6

Code:
<div>

<div>float:left;</div>

<div>float:left;</div>

<div> float:left;</div>

<div>float:left;</div>

</div>

The disadvantage of this method is that it cannot be wrapped, and if you want to wrap it, we recommend setting the floating child element of the floating parent element to the padding value.

CSS style float caused by floating "collapse" problem solving method