Shulou(Shulou.com)06/03 Report--

This article focuses on "the use of Float attribute in css". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "the use of the Float attribute in css"!

I. the characteristics of Float

1. Apply to text around pictures

two。 Create a block-level box

3. Multi-column floating layout

4. The width and height of the floating element is adaptive, but its value can be set.

Second, the problems solved by the core

The text surrounds the picture: the img tag is placed in a container with multiple text tags, and if the img floats, the text tag surrounds the picture.

001 file content file

P tag file content file content

Div tag file content file Content file content file content file

2.1 this is a problem

The floating element is adjacent to the normal element, and there is no clear float between the floating element and the normal element, so the normal element is covered by the floating element, but the contents are displayed around the floating element.

001

002

001 floats, 002 does not 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 first, and then start another line beyond the part.

Main features

1. Parent high 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;} left right

two。 Width and height become adaptive child elements, but the settings of width and height are valid.

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

two。 Solve the problem of high collapse

First of all, 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 independently rendered area that specifies how the interior of the area is laid out and has nothing to do with the outside. The main rules are as follows:

1.1 the internal box will be placed vertically, one after another

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

1.3The 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;} head left right

The outer margin of the box is set up and down between the .head and .wrap, but there is an overlap.

Between .head and .left, .head has the outer margin of 20px, and .left has the outer margin of 10px, which does not overlap because .wrap causes it to create BFC (overflow:hidden).

1.4 the left side of each box margin is in contact with the left side containing the border box (same as the right side), and the same is true of floats

2. IFC (row-level formatting context)

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

2.1 width and height cannot be specified

2.2 invalid vertical direction of Margin, Padding and border

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

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

The example of this section can refer to the inline element of the display chapter.

3. Solution

It is mainly based on the principle of BFC, because BFC renders the whole area, which will calculate the width and height. This is also the legendary scheme to clear the float.

3.1 parent container creates BFC method

3.1.1 methods for creating BFC

A) the value of Float except none

B) values of Overflow other than visible

C) Display values are table-cell, table-caption, inline-block, flex, inline-flex, etc.

D) Positioning values are absloute, fixed

E) Fieldset element

3.1.2 clear float

A) floats can be cleared by Float, overflow and display, but although position and fieldset create bfc, they cannot clear floats (that is, they cannot solve the problem of high collapse). The main reason is that both position and fieldset need child elements to prop up the height of the parent container, but there is no height after the child element floats, so it is invalid.

B) sample codes for Float, overflow, display:

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

3.1.3 the last child element clear:both

Use the principle that clear:both triggers the parent container to recalculate the height. The example 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;} left right footer

3.1.4 After add the last child element

Using css's: after pseudo-element implementation, dynamically insert elements and clear 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;} left right footer

4. Summary

1. Using bfc to clear floats is simple and well supported by browsers, but there are problems with support in the IE6- version. However, there are the following limitations, which should be adapted to the environment:

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

B) Float mode: let the parent container float, then there is an impact on the peer elements of the parent container

C) Dipslay method: changing the parent container to table or flex, etc., has ambiguous effects and is not recommended.

two。 The best solution: use: after to add a pseudo element and give clear:both and zoom:1 to clear the float, good compatibility, minimal impact on the environment.

At this point, I believe you have a deeper understanding of "the use of the Float attribute in css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.