Deep understanding and application of Float attributes, deep understanding of float attributes

Deep understanding and application of Float attributes, deep understanding of float attributes
I. Features of Float

1. Applied to text-centered Images

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.

Ii. Core Issues

Text surrounding image: img labels and multiple text labels are placed in one container. If img is floating, text labels are centered around the image.

 <p> 001 File Content file content <br/> File content File Content file content <br/> <p> p tag File Content file Content file content </p> <div> Div tag File Content file content </div> content File Content file content <br/> File Content File content File Content file content <br/> File Content file content <br/> </p>

2.1 this is a problem.

The floating element is adjacent to the normal element, and the floating element does not clear the floating between it and the normal element. In this case, the normal element will be covered by the floating element, butThe content will be centered on floating ElementsDisplay.

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

001 floating, 002 not floating, but 002 element itself is 001 covered, but the content is displayed around 001.

Iii. Non-core and main application fields

Partition layout: arrange the blocks horizontally, and then start another row when the excess parts are exceeded.

Main features

1. Parent-level 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;        }

<div class="wrap">        <div class="left">left</div>        <div class="right">right</div></div>

2. The width and height are changed to adaptive sub-elements, but the width and height settings are valid.

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

<div class="wrap">        <div class="left">left</div>        <div class="right">right</div></div>

2. Solve the Problem of high collapse

First, we need to understand the basic concepts of BFC and IFC, because they are closely related to browser rendering.

1. BFC (Block-level formatting context)

It is an independent rendering area that specifies the layout of the area and has nothing to do with the outside. The main rules are as follows:

1.1 The internal box will be placed vertically one by one

The vertical distance of 1.2 boxes is determined by margin. The Margin of two adjacent boxes belonging to the same BFC overlaps.

1.3 The BFC region 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;        }

<div class="head">head</div>    <div class="wrap">        <div class="left">left</div>        <div class="right">right</div>    </div>

The. head and. wrap boxes are configured with a 20 PX margin between the upper and lower sides, but overlap;
. Head and. between left ,. head has a margin of 20 PX ,. left has a 10px margin and does not overlap because. wrap creates BFC (overflow: hidden ).

1.4 The left side of the margin of each box is in contact with the left side of the box containing border (the right side). The same is true for floating.

2. IFC (Row-level formatting context)

The frame starts from the top of the contained block and is placed horizontally one by one. The space occupied by the outer margin, border, and internal margin in the horizontal direction is put together (display is inline, inline-block; the elements with the inline feature are specific to the following features ). The rules are as follows:

2.1 width and height cannot be specified

2.2 invalid vertical orientation of Margin, Padding, and border

The left side of the 2.3 row box is closely bound to the left side of the contained block, while the right side of the row box is closely bound to the right side of the contained box. floating blocks can be inserted between the edge of the contained block and the row box.

The height of the box in the 2.4 rows is determined by line-height.

For this example, refer to the inline element in the display section..

3. Solution

It is mainly implemented based on the principle of BFC. Because BFC renders the entire area, the width and height are calculated. This is also the legendary solution to clear floating

3.1 create a BFC using the parent container

3.1.1 how to create BFC

A) Float values except none;

B) value of Overflow except visible;

C) The Display values include table-cell, table-caption, inline-block, flex, and inline-flex.

D) The Position values are absloute and fixed.

E) Fieldset Element

3.1.2 clear floating

A) Float, overflow, and display can be cleared, but position and fieldset cannot be cleared although bfc is created (that is, they cannot solve the height collapse problem ). The main reason is that position and fieldset both require sub-elements to support the height of the parent container, but the sub-elements do not have a height after floating, so they become invalid.

B) Sample Code of Float, overflow, and display:

.wrap{            background: gray;            padding: 10px;            overflow: auto;        }        .left, .right{            background: red;            float: left;            width: 200px;            height: 100px;        }        .right{            background: yellow;        }        .footer{            background: pink;        }

<div class="wrap" >        <div class="left">left</div>        <div class="right">right</div>    </div><div class="footer">footer</div>

 

3.1.3 last child element clear: both

Use clear: both to trigger the parent container to recalculate the height. 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;        }

<div class="wrap" >        <div class="left">left</div>        <div class="right">right</div>        <div class="clear"></div>    </div><div class="footer">footer</div>

3.1.4 add the last child element After

Use the css: after pseudo-element implementation, dynamically Insert elements and clear floating:

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

<div class="wrap" >        <div class="left">left</div>        <div class="right">right</div>     </div>    <div class="footer">footer</div>

 

4. Summary

1. Using the bfc method to clear the float is simple and the browser supports well, but there is a problem with the support in IE6-version. However, the following limitations apply to the environment:

A) Overflow mode: the scroll bar is hidden. If the sub-content is too high, the display is incomplete;

B) Float mode: if the parent container is floating, the influence on the elements of the parent container's peers exists;

C) Dipslay: Changing the parent container to table or flex has an unclear impact. We do not recommend this method.

2. Best Solution: Use: after to add a pseudo element and give clear: both and zoom: 1 to clear the floating. The compatibility is good and the environmental impact is minimized.