CSS float summary

Time:2021-7-16

Introduction

In the maintenance of some projects, we found many places to usefloatTo carry out layout, we know the effect of this attribute and how to solve related problems, but we can’t give a further reason, so let’s sort it out.

appointment

This is for understandingfloatInstead of comparing their advantages and disadvantages and compatibility, we should believe that the future is more and more beautiful. The basic HTML structure is as follows:

<div class="float-parent">
  <div class="float-ele fl"></div>
</div>

The following is an example page:CSS floating float related initial solution example

Mobile browsing

CSS float summary

The purpose of floating

The original intention of floating design is to achieve text surround effect. In some tutorials, the introduction to floating does not emphasize this, but how to use this attribute to achieve some so-called “interesting” effects. Although the idea has been expanded, it doesn’t feel suitable.

Introduction to floating

The W3C document is very concise: this property specifies whether a box floats to the left, right or not. Here are the basic features.

Value: left | right | none | inherit
Initial: none
Applies to: all,but see 9.7
Inherited: no

Here are the instructions and some notes.

Important cognition

Floating removes the element from the normal document flow, breaking away from the normal document flow. Then move left or right until you reach the boundary of the container or another floating element.

The role of value

  • leftThe: element creates a block level box that floats to the left, and normal document flow starts at the right and top of the box.
  • right: followleftAttribute values are similar, except that the block level box generated by the element floats to the right, and the normal document flow starts from the left and top of the box.
  • noneThis box doesn’t float.

The relationship between display, position and float

I’ve seen people write these attributes together many times, and I feel that they are writing CSS with trial and error mentality. The following is an example page:Example of relationship between display, position and float。 The energy is limited, and only some values are tried in the application of rules.

These three attributes affect the generation and layout of the box, and they affect each other according to the following order rules

  1. IfdisplayThe property value of isnoneSopositionandfloatProperty is not applied. This does not create a box.
  2. Otherwise, ifpositionThe specified value for isabsoluteorfixedThis box will be absolutely positioned,floatThe calculated value of is taken asnonedisplayThe value rules of are shown in the table below. The position of the box depends on the size of the boxtoprightbottomleftProperty and the containing block of the box.
  3. Otherwise, iffloatSpecifiednoneOtherwise, the box will float, anddisplayThe value rules are shown in the table below.
  4. Otherwise, if this element is the root element,displayThe value rules are shown in the table below. However, there is one exception in css2.2, which is specified aslist-itemThe value of becomes the calculated valueblockorlist-itemIts value is undefined.
  5. Otherwise, the restdisplayProperty values are applied according to the specified values.
The specified value Calculated value
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
others same as specified

As can be seen from the above rules, writing these attributes together sometimes doesn’t work. For unfamiliar people, it will cause unnecessary confusion.

Floating constraint rules

There are many rules for constraints, but there are not so many in practice. I think we should pay attention to three points

  1. The containing block of a floating element is its nearest block level parent element;
  2. The boundary of the containing block to the floating element refers to the boundary of the content area;
  3. The interaction between multiple floating elements.

Please refer tohere。 If we encounter relevant situations in the future, we need to supplement them here.

Floating problem

This is the well-known problem of high collapse of the parent element, which can be imagined due to the separation from the document flow. In order to solve this problem, there are two versionsClear floatandClosed floating。 YesThis articleI think that’s very reasonable. We are trying to solve the problem of high collapse,Clear floatIt’s just one of them. It’s calledClosed floatingMore appropriate and rigorous.

Closed floating method

Method 1: use the attribute clear

Style property clear

The structure becomes as follows

<div class="float-parent">
  <div class="float-ele fl"></div>
  <div class="clear-fix"></div>
</div>

The new styles are:

.clear-fix {
  clear: both;
}

This is the use of CSS propertiesclearThis property indicates that the other side of the element box will not be adjacent to the earlier floating box. The value isbothIt means:

In the source document, if there is a floating element earlier than the element, you need to make the top border of the element below the bottom margin of any right floating or left floating element.

Label property clear

<div class="float-parent">
  <div class="float-ele fl"></div>
  <br clear="all" />
</div>

This function is the same as the CSS form, the attribute on the tagclearIt has been abandoned in HTML5. It is recommended to use CSS propertiesclear

Method 2: using pseudo elements

/*Add to parent element*/
.close-float-method2:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

This is to replace additional tags with pseudo elements. The main attributes are still usedclear。 It is said that there is a problem with this method when crossing browsers. IE7 is mentioned in it, but I didn’t try it. See the following for detailshere

Method 3: use the property overflow

/*Add to parent element*/
.close-float-method3 {
  overflow: hidden;
}

This brings up a conceptBlock formatting contexts

Floating, absolute positioning elements, and block level containing blocks (such asinline-blockstable-cellstable-captions)It’s not a block box,overflowProperty valuevisibleBlock level boxes with external values create a new block level formatting context for their contents.

In a block level formatting context, vertically, boxes are placed one after another, starting from the top of a containing block. The distance between two adjacent boxes in the vertical direction is determined bymarginAttribute decision. Vertical margins overlap in the same block level formatting context.

In a block level formatting context, the left outer boundary of each box contacts the left boundary of the containing block. This is also true for floating displays, unless the box creates a new block level formatting context.

It’s used hereoverflowAfter that, a block level formatting context is established, which contains floating elements, so floating is closed.

Related example pages mentioned above:CSS floating float related initial solution example

reference material