Block-level formatting context (block formatting context), floating, and absolute positioning work in a detailed

The visual format model of CSS has a very important concept-positioning scheme. Positioning scheme to control the layout of elements, in the CSS2.1, there are three kinds of positioning schemes-ordinary flow, floating and absolute positioning:

Normal flow: Elements are placed in the top-down layout, the inline elements are arranged horizontally until the line is filled, the block element is rendered as a complete line, and unless specified, all elements default to normal stream positioning.

Floating: In a floating layout, the elements first appear in the normal flow position, and then offset as far as possible to the left or right depending on the floating direction, and the effect is similar to text wrapping.

Absolute positioning: The element is detached from the normal flow, so an absolutely positioned element does not have an effect on its sibling elements (unlike float), where the element's location is determined by the coordinate position.

BFC is a normal stream, so it has no effect on sibling elements.

Part I: A detailed explanation of BFC working principle

One, BFC (block-level formatting context)

BFC is a concept in the CSS2.1 specification that determines how elements are positioned on their content, and how they relate to and interact with other elements. BFC is currently supported in other browsers except Ie6-7. In CSS3, BFC is called Flow Root.

The BFC element can be seen as a separate, isolated container compared to a normal container, and the inner elements do not affect the outer elements on the layout.

Second, how to form BFC

elements that satisfy any of the following conditions can form BFC:

1. Floating element, float except for the value outside of none

2. Absolute positioning elements, position:absolute/fixed

3. Display for Inline-block, Table-cells, table-captions one

4. Overflow is a value other than Visivle (Hidden,auto,scroll)

Display:table itself does not produce BFC, but it generates an anonymous box, which contains a Display:table-cell box that produces BFC.

Note: BFC is not an element, but an element with some attributes, so the above elements produce BFC, and they are not BFC themselves.

Third, the role of BFC

On the whole, the role of the BFC is to isolate the container, with three specific performances:

1. BFC can contain floating elements

This is the principle of using the Overflow:hidden method to close the float, the original text: "' Auto ' heights for block formatting context roots", that is, BFC will automatically adapt to the height of child elements, so that the child elements contain floating

<div style= "border:1px solid #00F; overflow:hidden;width:300px;" >    <div style= "float:left;background: #939;" > My parent element is bfc</div></div> <div style= "LINE-HEIGHT:3EM;" >----------I am gorgeous split line-----------</div><div style= "border:1px solid gray;width:300px;" >    <div style= "float:left;background: #3C6;" > My parent element is not bfc</div></div>.

Note: Ie6-7 does not support BFC, need to go haslayout closed floating

2.BFC can organize elements to be covered by floating elements

The block-level sibling element of a floating element ignores the position of the floating element, maximizing the line, which is covered by a floating element, which forms a BFC for the sibling element to be overwritten.

<div style= "Float:left;width:150px;height:50px;background: #FF0;" >    I am floating element </div><div style= "width:200px;height:80px;background: #30F; color: #fff;" >    I was a non-floating element and did not create Bfc</div><div style= "LINE-HEIGHT:3EM;" >----------I am gorgeous split line-----------</div><div style= "float:left;width:150px;height:50px;background: #FF0;" >    I am floating element </div> <div style= "width:200px;height:80px;background: #30F; color: #fff;d isplay: Inline-block; " >    I am a non-floating element that created the bfc</div>

3. BFC can prevent the margin folding of parent-child elements

The margins between their vertical orientations are collapsed when and only if two block-level elements are adjacent and the context is formatted at the same level. That is, two block-level elements are contiguous in time, and their margins are not collapsed when they are not in the same BFC.

<div style= "margin-top:20px;background:yellow;width:300px;" >    <div style= "margin-top:20px;" >        My top margin is 20px, the parent element is not BFC    </div></div><div style= "Margin-top:20px;background:yellow;o verflow:auto;width:300px; " >    <div style= "margin-top:20px;" >        My top margin is 20px, and the parent element is BFC    </div></div>

Iv. BFC and Haslayout

Because IE6-7 does not support BFC, it uses the private property haslayout. In the view of Haslayout and BFC similar, triggering haslayout conditions and BFC similar, in addition to the element set IE specific CSS properties zoom:1; Zoom is used to set or retrieve the scale of an element with a value of 1 it is relatively convenient to use zoom to trigger haslayout and not have other effects on elements, even with the actual dimensions of the elements.

Part II: The working principle of float and clear float

One, what is float

The float property of CSS is like a text-enclosed image in a print layout, and the float element is removed from the stream, but it is still part of the normal flow, and float is displayed directly after the last block level element in front of them, except that floats are similar to absolute positioning.

Any element declared as float is automatically set to a "block-level element", which means it can have a declared width and height property. Float without a specified width should be scaled to the width of the floating content, for example, a float with a picture inside will be as wide as the picture, and a float with text as wide as the longest text line within that float.

Second, the floating defects and clearance

When an element is set to float, the common flaw is that the position of the sibling element that affects it and the parent element creates a high collapse.

1. Position that affects sibling elements: block-level elements ignore this float element, making itself as close as possible to the float element, resulting in the overlay, as far as possible the floating element.

2. High collapse: The floating element is detached from the normal flow, which causes the parent element that contains it to automatically hold high due to the existence of the floating element, resulting in collapse.

The clear principle: clear adds enough white space to the element to place it under a floating element (CSS2.1), which is the same as adding an element's margin to make the element fill the line and force the line wrap effect (CSS1,CSS2).

Clear clears the effect on sibling elements, but does not resolve the problem of collapse, and therefore requires a more advanced clear float-closed float.

1. Empty Div method

<div class= "box" >    <div class= "main left" > I've set the floating float:left</div> <div    "clear: both; " ></div>    <div class= "Aside" > I am the footer, I added an empty div</div></div> with the Clear:both set up

an empty div is handy, but adding a div with no meaning contradicts the principle of separation of structure from expression.

2. Overflow method

Setting the value of overflow on the parent element of a floating element is hidden or auto, and can form a BFC to make a closed float.

<div class= "box" style= "Overflow:hidden; *zoom:1; " >    <div class= "main left" > I've set the floating float:left</div>    <div class= "aside Ieft" > I'm the footer, But I also set the left float. </div></div>

Overflow is more convenient than an empty div, but when the element contains child elements that are outside the bounds of the parent element, the useful child elements are overwritten, or extra scrollbars are generated.

3.: After pseudo-element method

<style>    . Clearfix {/* triggers haslayout */zoom:1;}    . Clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;} </style><div class= "box Clearfix" >    <div class= "main left" > I set the floating float:left</div>    <div class= "aside left" > I am the footer, but I also set the float to the right. </div></div>

Combination: After pseudo elements and iehack, can be perfectly compatible with major mainstream browsers.

clear the nature of floating methods: The above example shows that the clear float method can be divided into two categories: the use of the clear method and the triggering BFC method

Part III: The absolute positioning of the working principle of the detailed

The absolute positioning of an element is to drag the element out of the normal stream, using attributes such as top,left,bottom,right to locate the closest parent reference. Where the parent reference is a parent element relative to its closest location setting (Relative,absolute,fix), if the parent element does not have a positional property set, the BODY element is used as the referential position.

Absolute positioning can cascade, cascade order through the Z-index property control.

I. Absolute positioning using the left and top properties

The hierarchy relationship is:

<div ——————————— position:relative; Not the nearest ancestor positioning element, not the reference <div —————————-not set as the anchor element, not the reference <div ———————-position:relative reference <div box1<div box2--– Position:absolute; top:50px; Left:120px;<div Box3

To change the effect of the reference (Orange box)
The hierarchy relationship is:

<div ——————————— position:relative; The nearest ancestor positioning element, the reference <div —————————-is not set as the anchor element, not the reference <div ———————-not set as the anchor element, Not the reference <div Box1<div Box2--–position:absolute; top:50px; Left:120px;<div Box3

Reference to the top-level element case
The hierarchy relationship is:

<div ——————————— not set to anchor element, not reference <div —————————-not set to anchor element, not reference <div ———————-not set to anchor element, not reference <div box1< Div Box2--–position:absolute; top:50px; Left:120px;<div Box3

Ii. absolute positioning using the margin attribute

In this case, the values of Margin-bottom and margin-right no longer affect the elements in the document flow because the element has been detached from the document flow.  In addition, regardless of whether its ancestor element is positioned, it is offset from the original position in the document stream.
The hierarchy relationship is:

<div ——————————— position:relative; Not the reference <div —————————-not set as the positioning element, not the reference <div ———————-not set as the positioning element, not the reference <div Box1<div Box2--–position:absolute; margin-top:50px; Margin-left:120px;<div Box3

IE6, there is no sibling node in front of Box2, then the value of Margin-left appears double margin
The hierarchy relationship is:

<div ——————————— position:relative; Not the reference <div —————————-not set as the positioning element, not the reference <div ———————-not set as the positioning element, not the reference <div Box1<div Box2--–position:absolute; margin-top:50px; Margin-left:60px;<div Box3

Block-level formatting context (block formatting context), floating, and absolute positioning work in a detailed