preface

There are three traditional CSS layouts. Note that the traditional CSS layout does not include flex and Grid layouts.

• 1. Common flow Common flow is also called standard flow. Labels are arranged in a specified default way, which is the most basic layout. Block elements are arranged from top to bottom in an exclusive row. Common tags are div, HR, A, P, H1-H6, table, and form. Inline label, features: Adjacent elements in a row, a row can display more than one, from left to right, touch the edge of the parent element wrap
• 2. Float — that’s what we’re going to share today
• 3. Positioning — MORE on this later

Why you need to float

To learn a new knowledge, we must first understand the use of learning it, why to learn it, here we think about two questions

1. How to arrange multiple block-level boxes (divs) horizontally in a row?One thought we could do this by giving three divs display:inline-block; Convert divs to inline elements so that all three are displayed on the same line. Of course you can2. How to make the two boxes side by side?Using file streams alone is also not easy to implement

Summary: There are a lot of layout methods that we can’t do with standard flow alone, but we can do it with float, because float can change the default arrangement of element tags

The most typical use of float is to have multiple block-level elements displayed on the same line

What is floating

The float property is used to create a floating box, moving the floating box left or right until its outer edge touches the border containing the box or another floating box syntax: selector {float: property value}

Floating characteristics

1. Floating elements are de-marked, and floating boxes no longer remain in their original positions
2. Floating elements are displayed within a line and aligned at the top of the elements
3. Floating elements have the properties of inline block elements

• Take off the interpretation

Out of the control of the standard flow, floating to a specified position referred to as de-standard, floating box no longer retain the original position

• Inline display and top aligned explanation

If multiple boxes are set to float, they are displayed in line with the property values and aligned at the top

Note: the floating elements are close to each other, so there is no gap. If the parent element is not wide enough to hold so many floating boxes, the extra ones are wrapped

• With inline block elements

Any element can float. Does a float have the same properties as an inline block element, regardless of its original schema

Use cases and precautions

Floating elements are often used with standard flows

Matters needing attention

1. Floating elements are used with standard flows
   
   The parent element of the standard stream is used to arrange the upper and lower elements, then the inner child element is used to float the left and right elements
2. If one element floats, theoretically the rest of its siblings float as well
   
   There are multiple boxes in a box, and if one box floats, the rest of the boxes should theoretically float as well,Floating boxes affect the standard stream behind the floating box, not the front one

Remove the floating

Why clear the float

In most cases, it is not convenient for the parent box to give height, but if you do not give height, the child box float does not occupy position, the parent box position is 0, which affects the layout of the following standard flow



After the float is cleared, the parent box will automatically monitor the height of the box based on the floating child box, without affecting the standard stream below

Clear float usage

Syntax selector {clear: property value}

In practice, clear:both is almost always used, and the strategy for clearing floats is closed floats

Method to clear the float

1. Extra label method, also known as partition method
2. Parent element addedoverflowattribute
3. Parent element addedafterPseudo elements
4. The parent element adds a double pseudo-element

• 1. Extra label method

Partition method, add an extra tag after the last float element, add clear float style

<div class="box"> <div style="float:left">1</div> <div style="float:left">2</div> <! <div style="clear:both"></div> </div>Copy the code

Advantages: Easy to understand, easy to write disadvantages: add many meaningless labels, poor structure

• 2. The parent element adds overflow attributes

Add overflow property to parent, set it to Hidden, auto, or scroll

<div style="overflow: auto; > <div style="float:left">1</div> <div style="float:left">2</div> </div>Copy the code

Advantages: Concise code disadvantages: unable to display the overflow part

• 3. :after pseudo-element method

:after is also added to the parent element, with the following style code:

Recommend <! -->. Clearfix :after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }.clearfix {/* IE6, 7 proprietary */ *zoom: 1; }Copy the code

Advantages: No tags added, simpler structure Disadvantages: Take care of the representative websites of earlier browsers: Baidu, Taobao.com, netease, etc

• 4. Double pseudo-element cleanup float

Also add to the parent element in the following style

Recommended. Clearfix: before,. Clearfix: after {content: "", display: table}. Clearfix: after {clear: both; } .clearfix{ *zoom:1; // IE6, 7 proprietary}Copy the code

Advantages: more concise code disadvantages: take care of the lower version of the browser on behalf of the website: Millet, Tencent, etc

Clear float summary

The parent element does not add height, the child element has a float, affecting the following layout, we need to clear the float, the strategy is to close the float, so that the float inside the parent box, does not affect the other elements outside the parent box to clear the float there are 4 methods

Write in the back

From the front of the small white to the big man on the road I continue to work hard, if you feel that this article a little inspiration and help, is my original intention, I hope you do not mean your likes and attention yo ~