Deep analysis and application of float property in CSS

I. The characteristics of float

1. Apply to text around picture

2. Create a block-level box

3. Multi-column floating layout

4. The width and height of the floating element are adaptive, but the values can be set.

Second, the core solution to the problem

Text around Picture: The img tag is placed in a container with multiple text labels, and if the IMG floats, the text label will surround the picture.

<p>001 file content file content content file content <br/> File content file content file content contents file content file content <br/> File content file content file content file content file content <br/> File content file content file content file content content file content file content <br/> <p>p label file content file content file content file content file content file content file content file content </p> <div>div label file content file content file content file content file content </div> File content file content file content file contents file content file content <br/> File content file content file content file content file content file content file content file content <br/> File content file content file content contents file content file content file content <br/> File content file content file content file contents file content file content <br/> File content file content file content file contents file content file content <br/> </p>

2.1 This is a problem

A floating element is adjacent to a normal element and there is no clear float between the floating element and the normal element, at which point the normal element is covered by the floating element, but the contents are displayed around the floating element.

<divstyle= "width:100px; height:200px; Background:red;float:left; " >001</div> <divstyle= "width:100px; height:200px; Background:gray;float:none; " ><p>002</p></div>

001 float, 002 no float, but 002 element itself is covered by 001, but the content is displayed around 001.

Third, Non-core and main application areas

Column layout: Let the blocks be arranged horizontally, and then go beyond the other line.

Main Features

1. Parent height collapse (This is also a serious problem)

. wrap{ background:red; padding:10px; Width:auto; } . left{ Background:gray; width:200px; height:100px; Float:left; } . right{ Background:yellow; width:100px; height:100px; Float:left; }

<divclass= "Wrap" > <divclass= "left" >left</div> <divclass= "Right" >right</div> </div>

2. Wide and high to become adaptive child elements, but wide and high settings are valid

. wrap{ background:red; padding:10px; Float:left; } . left{ width:100px; Background:gray; } . right:{ width:200px; Background:yellow; }

<divclass= "Wrap" > <divclass= "left" >left</div> <divclass= "Right" >right</div> </div>

2. Solving the problem of high collapse

First we need to understand the basic concept of BFC and IFC, because he has a close relationship with the browser's rendering.

1.BFC (block-level format context)

He is an independently rendered area, stipulating how the interior of the region is laid out and irrelevant to the outside, with the following main rules:

1.1 Inside box will be vertical, one after another to place

1.2 Box's vertical distance is determined by margin, and the margin of the two adjacent box belonging to the same BFC overlap.

1.3 BFC area does not overlap with float

. head{ Background:pink; margin:20px0px; height:100px; } . wrap{ background:red; padding:10px; margin:20px0px; Overflow:hidden; } . left{ width:100px; Background:gray; margin:10px0px; } . right:{ width:200px; Background:yellow; margin:20px0px; }

<divclass= "Head" >head</div> <divclass= "Wrap" > <divclass= "left" >left</div> <divclass= "Right" >right</div> </div>

. Head and. Wrap two box between the upper and lower sets have 20px outer margin, but overlap occurred;

. Head and. Left two, the. Head has a 20px outer margin,. Left has a 10px outer margin, and no overlap occurs because. Wrap makes it BFC (Overflow:hidden).

1.4 The left side of each box, margin with the left side of the border box (right), and so is the float.

2. IFC (line-level format context)

The box starts at the top of the containing block and is placed horizontally one after the other. The outer margin, border, and inner margin of the horizontal direction are all placed together (display as inline, inline-block, elements of the element itself with inline attributes are specific to the following characteristics). The rules are as follows:

2.1 Cannot specify wide height

Invalid 2.2 Margin, Padding, border vertical direction

The left side of the 2.3 line box clings to the left side of the containing block, and the right side of the line box is close to the right side of the containing box, and the floating block can be inserted between the containing block edge and the row box.

2.4 Inline frame height is determined by line-height.

This section can refer to the inline element of the display chapter.

3. The solution

Mainly according to the principle of BFC, because the BFC rendering is the whole block area, it will calculate the width and height. This is also the legendary elimination of floating scheme

3.1 Parent Container Create BFC method

3.1.1 How to create BFC

A The value of float other than none;

b) Overflow value other than visible;

c) Display values are Table-cell, Table-caption, Inline-block, Flex, Inline-flex, etc.

d) Position value is absloute, fixed

e) FieldSet elements

3.1.2 Clear Floating

A float, overflow, display three ways to clear the float, but position, fieldset although the creation of BFC but can not clear floating (that is, can not solve the problem of high collapse). The main reason is: position, fieldset need the child elements to open the height of the parent container, but the child element floating and no height, so failure.

b Float, overflow, display sample code:

. wrap{ Background:gray; padding:10px; Overflow:auto; } . Left,. right{ background:red; Float:left; width:200px; height:100px; } . right{ Background:yellow; } . footer{ Background:pink; }

<divclass= "Wrap" > <divclass= "left" >left</div> <divclass= "Right" >right</div> </div> <divclass= "Footer" >footer</div>

3.1.3 Last child element Clear:both

Using Clear:both to trigger the parent container to recalculate the height of the principle implementation, the sample code is as follows:

. wrap{ Background:gray; padding:10px; } . Left,. right{ background:red; Float:left; width:200px; height:100px; } . right{ Background:yellow; } . footer{ Background:pink; } . clear{ Clear:both; Zoom:1; }

<divclass= "Wrap" > <divclass= "left" >left</div> <divclass= "Right" >right</div> <divclass= "Clear" ></div> </div> <divclass= "Footer" >footer</div>

3.1.4 After adding the last child element

Using CSS: After pseudo element implementations, dynamically inserting elements and clearing floats:

. wrap{ Background:gray; padding:10px; } . wrap:after{ Content: '; Display:block; Overflow:hidden; Clear:both; } . Left,. right{ background:red; Float:left; width:200px; height:100px; } . right{ Background:yellow; } . footer{ Background:pink; }

<divclass= "Wrap" > <divclass= "left" >left</div> <divclass= "Right" >right</div> </div> <divclass= "Footer" >footer</div>

4. Summary

1. The use of BFC method to clear the float, simple, browser support is good, but in the ie6-version support there is a problem. However, the following limitations exist, to adapt to the environment:

A) Overflow mode: The scroll bar will be hidden, if the child content is too high there is a problem of incomplete display;

b Float Method: Let the parent container float, then there is the parent container sibling elements influence;

c) Dipslay mode: Let the parent container into table or flex, there are ambiguous effects, we do not recommend use.

2. The best solution: use: After adding a pseudo element and give Clear:both and zoom:1 to achieve clear floating, good compatibility, the least impact on the environment.