A detailed description of the Float property in CSS

This time to bring you CSS in the Float property in detail, the use of CSS in the Float property considerations are what, the following is the actual case, take a look.

I. Characteristics of FLOAT

1. Apply to text around the 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 value can be set.

Second, the core solution of the problem

Text surrounds the picture: the IMG tag is placed in a container with multiple text labels, and if the IMG floats, the text label surrounds the picture.

 <p>001 content File content content file contents <br/> file content file content file content file contents file Content files contents        <br/> File content file content file content file content file contents <br/> file content file content file content file contents content file content file contents files Contents         <br/>        <p> P tag File content file content file content file contents document content file content file content files contents </p> <p>p tag file content file content file content file content file contents files Contents        </p>        File content file content file content file content file contents file contents <br/>        file         content file content file content file content file content file contents file File content file content file content file content files content file content files contents <br/> file content file content file contents file content files contents contents file contents files contents contents document content Documents        <br/>        </p>

2.1 This is a question

Floating elements are adjacent to normal elements, and floating elements are not cleared from normal elements, and normal elements are covered with floating elements, but the contents are displayed around floating elements.

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

001 Floats, 002 does not float, but the 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 chunks be arranged horizontally and then out of the other line.

Key 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;        }

<p class= "wrap" >        <p class= "left" >left</p>        <p class= ' right ' >right</p></ P>

2. wide and high to adaptive sub-elements, but wide and high setting is effective

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

<p class= "wrap" >        <p class= "left" >left</p>        <p class= ' right ' >right</p></p >

2. Solve the problem of high collapse

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

1.BFC (Block-level formatting context)

He is an independently rendered area that specifies how the area is laid out and irrelevant to the outside, the main rules are as follows:

1.1 The inner box is vertically oriented and placed one after another

1.2 Box The vertical distance is determined by margin, and the margin of the two adjacent boxes belonging to the same BFC overlap

1.3 BFC area does not overlap with float

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

<p class= "Head" >head</p>    <p class= "wrap" >        <p class= "left" >left</p>        <p class= "Right" >right</p>    </p>

The top and bottom of the. Wrap two box are set with a margin of 20px, but overlap occurs;

. head with. Left two,. Head has a margin of 20px,. Left has a 10px margin, and there is no overlap because. wrap causes it to create BFC (Overflow:hidden).

1.4 On the left side of each box's margin, in contact with the left side of the containing border box (right), so does the float.

2. IFC (Row-level formatting context)

The box starts at the top of the containing block and is placed horizontally one after the other. The margins, borders, and padding in the horizontal direction are all put together (display is inline, inline-block; elements with an inline attribute of the element itself are specific to the following characteristics). The rules are as follows:

2.1 Cannot specify width height

2.2 Margin, Padding, border vertical direction invalid

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

2.4 Inline box height is determined by line-height.

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

3. Solution

Mainly according to the principle of BFC implementation, because the BFC rendering is the whole block area, will also calculate the width, high. This is also the legendary solution to clear the floating

3.1 Parent Container Create BFC method

3.1.1 Ways to create BFC

A) float in addition to the value of none;

b) Overflow values 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 Float

A) float, overflow, display three ways can be cleared floating, but position, fieldset although created BFC but can not clear the float (that is, not to solve the problem of high collapse). The main reasons are: position, fieldset all need child elements to open the height of the parent container, but the child element floats and there is no height, so invalid.

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;        }

<p class= "wrap" >        <p class= "left" >left</p>        <p class= ' right ' >right</p>    </p><p class= "Footer" >footer</p>

3.1.3 Last child element Clear:both

Using Clear:both to trigger the parent container to recalculate the height of the implementation of the principle, 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;        }

<p class= "wrap" >        <p class= "left" >left</p>        <p class= ' right ' >right</p>        <p class= "clear" ></p>    </p><p class= "Footer" >footer</p>

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;        }

<p class= "wrap" >        <p class= "left" >left</p>        <p class= ' right ' >right</p>     </p><p class= "Footer" >footer</p>

4. Summary

1. Use BFC mode to clear floating, simple, browser support is good, but in ie6-version support problems. However, there are the following limitations, which are suitable for the environment:

A) Overflow mode: The scrollbar will be hidden, if the sub-content is very high, there is a problem of display is not complete;

b) Float mode: Let the parent container float, then there is a parent container of the sibling elements of the effect;

c) Dipslay way: To change the parent container to table or flex, there is an ambiguous effect, we are not recommended to use.

2. Best solution: Use: After adding a pseudo-element and give Clear:both and zoom:1 to achieve clear float, compatibility, and environmental impact is minimal.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS for 3D button effects

Opacity transparency filter for IE compatible solutions

Horizontal Vertical Centering Method