1. Three CSS layout mechanisms

At the heart of web layout is the use of CSS to place boxes.

The CSS provides three mechanisms for setting the placement of boxes: normal flow (standard flow), float, and position.

1. Normal flow(Standard flow)
   • Block-level elementsWill monopolize a line,From the top downTo arrange in order;
     • Common elements: div, HR, P, H1 ~ H6, ul, OL, DL, form, table
   • Inline elementsIn order,From left to rightOrder, when the parent element edge is automatically wrapped;
     • Common elements: SPAN, A, I, em, etc
2. floating
   • Float the box from the normal flow. The main function is to display multiple block-level boxes in a row.
3. positioning
   • Position the box somewhere in the browser – CSS is all about positioning, especially the js effects behind it.

2. Why float?

Consider:

The first thing we need to think about is the most common question in the following 2 layouts.

1. How do I arrange multiple boxes (divs) horizontally in a row?

2. How to achieve left and right alignment of boxes?

Although we learned about inline-blocks earlier, they have their own disadvantages:

1. It can display multiple elements in a row, but there will be gaps in the middle, which cannot meet the first problem above.
2. It does not achieve the second problem above, box left and right alignment

conclusion

Because of some page layout requirements, standard flow is not enough for our needs, so we need to float to complete the page layout.

3. What is a float?

Concept: 3.1.

Element float is when the element with the float attribute is set

1. Out of control of standard normal flow
2. Moves to the specified position.

3.2. Effect of

1. Having multiple boxes (divs) arranged horizontally in a row makes floating an important tool for layout.
2. Boxes can be left and right aligned, etc..
3. Floating was originally used to control pictures, to achieve the effect of text around the picture.

3.3. Grammar

In the CSS, float is defined by the float property as follows:

Selector {float: property value; }Copy the code

Attribute values	describe
none	Elements do not float (The default value)
left	Elements toOn the leftfloating
right	Elements torightfloating

Teach you the floating formula. Float through float —–

3.3.1. Float of floating formula

Float — float — float — float — float — float — float — float — float — float — float — float — float — float — float — float — float Out of standard flow. Commonly known as “off standard”

.box1 { width: 200px; height: 200px; Background: rgba(255, 0, 0, 0.5); float: left; } .box2 { width: 150px; height: 300px; background-color: skyblue; }Copy the code

Summary:

• floatProperty causes the box to float on top of the standard flow, so the second standard flow box goes under the floating box.

3.3.2. Leakage of floating formula

Floating – leakage leakage ~ floating box, leakage of its original position to the following standard flow box, is not occupy the original position, is out of the standard flow, we commonly known as “off the scale”.

.box1 { width: 200px; height: 200px; Background: rgba(255, 0, 0, 0.5); /* float the first box */ float: left; } .box2 { width: 150px; height: 300px; background-color: skyblue; }Copy the code

So what’s underneath Box2 is actually underneath box1, it’s trapped by Box1, it’s covered up

Come on, let’s look at a stereo

3.3.3. Characteristics of floating formula

Float — The float property changes the element display property.

Any element can float. The floating element generates a block-level box, regardless of what element it is. The resulting block-level box is very similar to the inline block we saw earlier.

Experience example — divs are arranged horizontally

div { width: 200px; height: 200px; background-color: pink; / /* display: inline-block; / /* Display: inline-block; Float: left; float: left; float: left; float: left; } .two { background-color: hotpink; }Copy the code

Note: the floating elements are close to each other, but if the parent width does not fit the floating boxes, the extra boxes will be aligned on another line

A. float B. float C. float D. float

The core purpose of our float is to have multiple block-level boxes displayed on the same line. Because that’s one of the most common layouts we have

Float — float

The characteristics of	instructions
floating	Add a floating boxIs the floatFloating on top of other standard flow boxes.
leakage	Add a floating boxIt doesn’t take up spaceWhere it used to beA box that missed the standard flow.
,	Pay special attention toFloat elements change the display property, similar to converting to inline blocks, but with no gaps between the elements

5. Float applications

5.1. The float works with the parent box of the standard stream

We know that floating is off-scaling and will affect the following standard flow elements. In this case, we need to add a parent of the standard flow to the floating element to minimize the impact on other standard flows.

A complete web page, is the standard flow + float + we will talk about positioning together.

Navigation Bar case

Note that in the actual important navigation bar, instead of using link A directly, we use li to include links (li+a).

1. Li + A is more semantic, and this is the content of a coherent column phenotype.
2. If you directly use a, search engines are easy to identify as suspected of stacking keywords (deliberately stacking keywords is easy to be search engines have the risk of reducing the right), so as to affect the website ranking

6. Float extension

6.1. Relationship between floating elements and parent boxes

• The float of the child box is aligned with the parent box
• Does not overlap the border of the parent box, nor does it exceed the inside margin of the parent box

6.2. Relation of floating elements to sibling boxes

In a parent box, if the previous sibling box is:

• Floating, so the current box will be aligned with the top of the previous box;
• Normal streaming, then the current box will be displayed below the previous sibling box.

Floating only affects current or subsequent standard flow boxes, not previous standard flows.

advice

If a box has multiple boxes inside it, if one of the boxes floats, the other brothers should float as well. Prevent problems

7. Clear floats

7.1. Why do I want to clear floats

Because the parent box in many cases, it is not convenient to give height, but the child box floating does not occupy the position, the final parent box height is 0, which affects the following standard flow box.

• Conclusion:
  • Since the floating element no longer occupies the place of the original document flow, it has an impact on subsequent element typography
  • To be precise, it is not to remove the float, but to remove the impact of the float

7.2. Clear float nature

Clear float nature:

Clearing floats is mainly to solve the problem of the parent element having an internal height of 0 due to child floats. Once the float is cleared, the parent automatically detects the height based on the float’s child box. The height of the parent does not affect the standard flow below

7.3. Method of clearing float

In CSS, the clear property is used to clear the float, here, we first remember to clear the float method, the specific principle, and so on we learn CSS will be back to the analysis.

7.3.1. Grammar:

Selector {clear: property value; } the clear clearCopy the code

Attribute values	describe
left	Do not allow floating elements on the left (clears the effects of floating on the left)
right	Do not allow floating elements on the right side (clear floating effects on the right side)
both	Also clear the left and right side floating effect

But in our practical work, we almost only use clear: both;

7.3.2. Extra label method (Partition method)

The W3C recommends doing this by adding an empty tag at the end of the float element such as <div style= "clear:both" ></div>, or other tags such as br, etc.Copy the code

• Advantages: easy to understand, easy to write
• Disadvantages: Added a lot of meaningless tags, poor structure.

7.3.3. Parent adds overflow property methods

Can give the parent add: overflow for hidden | auto | scroll can be implemented.Copy the code

Advantages: Simple code

Disadvantages: When the content increases, it is easy to cause that the content is not wrapped automatically, so that the content is hidden, and the elements that need to be spilled cannot be displayed.

7.3.4. Clear float with after pseudo-element

The :after method is an updated version of the extra tag method for empty elements. The advantage is that there is no separate tag

Usage:

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

• Advantages: accord with the closed floating thought structure semantic correctness
• Disadvantages: Since IE6-7 does not support: After, use Zoom :1 to trigger hasLayout.
• Representative websites: Baidu, Taobao.com, netease, etc

7.3.5. Clear floats with double pseudo-elements

Usage:

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
Copy the code

• Advantages: Simpler code

• Disadvantages: Since IE6-7 does not support: After, use Zoom :1 to trigger hasLayout.

• Representative websites: Xiaomi, Tencent, etc

7.4 Clearing Floating Summary

When will clear float be used later?

1. The parent has no height
2. The sub box is floating
3. If the layout is affected, we should clear the float.

The way to clear the float	advantages	disadvantages
Extra label method (partition method)	Easy to understand, easy to write	Add a lot of meaningless tags that are poorly structured.
The parent overflow: hidden;	Write simply	Overflow hidden
Parent after pseudo-element	Structure semantically correct	Because IE6-7 does not support: After, compatibility issues
Parent double pseudo-element	Structure semantically correct	Because IE6-7 does not support: After, compatibility issues

After the two pseudo-element clear float, we will use it for the time being, in-depth principle, we will learn pseudo-elements later.