Detailed explanation of how block formatting context, floating and absolute positioning work_html/css_WEB-ITnose

There is a very important concept in the CSS visual format model - positioning scheme. Positioning schemes are used to control the layout of elements. In CSS2.1, there are three positioning schemes? Normal flow, floating and absolute positioning:

Normal flow: elements are laid out from top to bottom according to their position, inline elements Arrange horizontally until the row is full and then wrap. The block element is rendered as a complete row. Unless specified, all elements default to normal flow positioning.

Floating: In a floating layout, the element first appears according to the normal flow position, and then is offset to the left or right as much as possible according to the floating direction. The effect is similar to text wrapping.

Absolute positioning: The element will break away from the normal flow, so the absolutely positioned element will not affect its sibling elements (unlike float). The specific position of the element is determined by the coordinate position.

BFC is a normal stream, so it does not affect sibling elements.

Part 1: Detailed explanation of how BFC works

1. BFC (block-level formatting context)

BFC is W3C A concept in the CSS 2.1 specification that determines how an element positions its content and relates to and interacts with other elements. Currently, all browsers except IE6-7 support BFC. In CSS3 BFC is called Flow Root.

Compared with ordinary containers, BFC elements can be regarded as isolated independent containers, and the internal elements will not affect the layout of the external elements.

2. How to form a BFC

Elements that meet any of the following conditions can form a BFC:

1. Floating elements, float values ​​other than none

2. Absolutely positioned elements, position:absolute/fixed

3. Display is one of inline-block, table-cells, table-captions

4. Overflow is Values ​​outside visivle (hidden, auto, scroll)

display:table itself does not generate BFC, but it generates anonymous boxes, and the box containing display:table-cell generates BFC.

Note: BFC is not an element, but some attributes of the element. Therefore, the above elements generate BFC, but they are not BFC themselves.

3. The role of BFC

Overall, the role of BFC is to isolate the container. There are three specific manifestations:

1. BFC can Contains floating elements

<div style="border:1px solid #00F;overflow:hidden;width:300px;">    <div style="float:left;background:#939;">我的父元素是 BFC</div></div> <div style="line-height:3em;">----------我是华丽分割线-----------</div><div style="border:1px solid gray;width:300px;">    <div style="float:left;background:#3C6;">我的父元素不是 BFC</div></div>

Note: IE6-7 does not support BFC, you need to start hasLayout to close the float

2. BFC can prevent elements from being covered by floating elements

The block-level sibling elements of the floating element will ignore the position of the floating element and try to occupy a full line. This will be covered by the floating element. A BFC is formed for the sibling element to prevent it from being covered.

<div style="float:left;width:150px;height:50px;background:#FF0;">    我是浮动元素</div><div style="width:200px;height:80px;background:#30F;color:#fff;">    我是非浮动元素，并且没有创建 BFC</div><div style="line-height:3em;">----------我是华丽分割线-----------</div><div style="float:left;width:150px;height:50px;background:#FF0;">    我是浮动元素</div> <div style="width:200px;height:80px;background:#30F;color:#fff;display:inline-block;">    我是非浮动元素，创建了 BFC</div>

3. BFC can prevent the margin collapse of parent and child elements

if and only if two block-level elements are adjacent and in the same block-level formatting context , the vertical margins between them will collapse. That is, even if two block-level elements are adjacent, their margins will not collapse when they are not in the same BFC.

<div style="margin-top:20px;background:yellow;width:300px;">    <div style="margin-top:20px;">        我的上外边距是 20px，父级元素不是 BFC    </div></div><div style="margin-top:20px;background:yellow;overflow:auto;width:300px;">    <div style="margin-top:20px;">        我的上外边距是 20px，父级元素是 BFC    </div></div>

4. BFC and hasLayout

Since IE6-7 does not support BFC, it uses the private attribute hasLayout. In terms of performance, hasLayout is similar to BFC. The conditions for triggering hasLayout are similar to BFC. In addition, the IE-specific CSS attribute zoom:1 needs to be set for the element; zoom is used to set or retrieve the zoom ratio of the element. A value of 1 means the actual size of the element is used. Use zoom can trigger hasLayout without causing other effects on elements, which is relatively more convenient.

Part 2: Detailed explanation of how float and clearing float work

1. What is float

CSS float Properties are like images surrounded by text in a typographic layout. Float elements are removed from the flow but remain part of the normal flow. Floats are displayed directly after the last block-level element before them. Otherwise floating is similar to absolute positioning.

Any element declared as float is automatically set as a "block-level element", which means that it can have declared width and height attributes. Floats with no specified width should be stretch-wrapped to the width of the float's content. For example, a float with an image inside will be as wide as the image, and a float with text will be as wide as the longest line of text within the float.

2. Float defects and clearance

When an element is set to float, a common defect is that it affects the position of its sibling elements and the height of the parent element Collapse.

1. Affects the position of sibling elements: block-level elements will ignore the float element and place themselves in the same line as the float element as much as possible, resulting in being overwritten; inline elements will surround the float element as much as possible.

2. Height collapse: The floating element breaks away from the normal flow, which means that the parent element containing it will not automatically be raised due to the existence of this floating element, thus causing collapse.

The principle of clear: clear will add enough blank space to the element so that the element is placed under its previous floating element (CSS2.1). This is the same as increasing the margin of the element so that the element fills the line. The effect of forced line breaks is the same (CSS1, CSS2).

clear可以清除对于兄弟元素的影响，但不能解决塌陷的问题，因此需要更高级的清除浮动??闭合浮动。

1. 空div方法

<div class="box">    <div class="main left">我设置了左浮动 float: left</div>    <div style="clear: both;"></div>    <div class="aside">我是页脚，我的上面添加了一个设置了 clear: both 的空 div</div></div>

空div很方便，但是加入了没有含义的div，与结构与表现分离的原则相违背。

2. overflow方法

在浮动元素的父元素上设置overflow的值为hidden或auto，可以形成BFC，使闭合浮动。

<div class="box" style="overflow: hidden; *zoom: 1;">    <div class="main left">我设置了左浮动 float: left</div>    <div class="aside left">我是页脚，但是我也设置了左浮动。</div></div>

overflow相对空div更方便，但是当元素内包含超出父元素边界的子元素时，会覆盖掉有用的子元素，或是产生多余的滚动条。

3. :after伪元素方法

<style>    .clearfix {/* 触发 hasLayout */ zoom: 1; }    .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }</style><div class="box clearfix">    <div class="main left">我设置了左浮动 float: left</div>    <div class="aside left">我是页脚，但是我也设置了左浮动。</div></div>

结合:after伪元素和IEhack，可以完美兼容主流各大浏览器。

清除浮动方法的本质：通过上面例子，可发现清除浮动方法可分为两类：利用clear方法和触发BFC方法

第三部分：绝对定位的工作原理详解

元素的绝对定位是将该元素从普通流拖出，使用top,left,bottom,right等属性相对于最接近的一个父级参照物进行定位。其中父级参照物为相对于其最接近的一个有定位设置(relative,absolute,fix)的父级元素，若父级元素没有设置定位属性，则依据body元素作为参照物定位。

绝对定位可层叠，层叠顺序通过z-index属性控制。

一、使用left和top属性的绝对定位

层级关系为：

<div ??????????? position:relative; 不是最近的祖先定位元素，不是参照物<div?????????-没有设置为定位元素，不是参照物<div???????- position:relative 参照物<div box1<div box2 ???position:absolute; top:50px; left:120px;<div box3

为改变参照物（橘色框）后的效果
层级关系为：

<div ??????????? position:relative;最近的祖先定位元素，参照物<div?????????-没有设置为定位元素，不是参照物<div???????-没有设置为定位元素，不是参照物<div box1<div box2 ???position:absolute; top:50px; left:120px;<div box3

参照物为最顶级的元素情况
层级关系为：

<div ???????????没有设置为定位元素，不是参照物<div?????????-没有设置为定位元素，不是参照物<div???????-没有设置为定位元素，不是参照物<div box1<div box2 ???position:absolute; top:50px; left:120px;<div box3

二、使用margin属性的绝对定位

此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
层级关系为：

<div ??????????? position:relative; 不是参照物<div?????????-没有设置为定位元素，不是参照物<div???????-没有设置为定位元素，不是参照物<div box1<div box2 ???position:absolute; margin-top:50px; margin-left:120px;<div box3

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距
层级关系为：

<div ??????????? position:relative; 不是参照物<div?????????-没有设置为定位元素，不是参照物<div???????-没有设置为定位元素，不是参照物<div box1<div box2 ???position:absolute; margin-top:50px; margin-left:60px;<div box3