CSS advanced (8) - containing block/BFC+IFC

1 containing block

1.1 What is a containing block

In simple terms, a containing block is "the element that contains itself", and the "containing block" of an element determines the size and positioning of the element.
"Containing block" is a relative concept, it does not mean that the parent element is the containing block. For example, in an absolute layout, the parent element is position:relative;and the child element is position:absolute;, then the parent element is the containing block of the child element, and the size and positioning of its own elements are determined by the parent element; but positioin:fixedthe containing block of the fixed positioning element is is the browser window.

1.2 Judgment and scope of the containing block

the containing block of the root element

<html>The root element is the topmost element on the page, it has no parent element, but also has a containing block, called the "initial containing block initial containing block".

containing block for fixed elements

If the element is fixedly positioned position:fixed, its containing block is the current viewable window (that is, the current browser window).

containing block for static/relatively positioned elements

If the element is statically or relatively positioned position:static/relative, its containing block is the closest block-level ( display:block, display:inline-block, display:table-cell) ancestor element.

The containing block of an absolutely positioned element

If the element is absolutely positioned position:absolute, then its containing block is the nearest ancestor element whose positionattribute value is not , which can be a block element or an inline element.static
If an element cannot find an ancestor with an positionattribute value of non static, then its containing block is <html>the root element, which is why, by default, absolutely positioned elements are positioned relative to the browser window.

the scope of the containing block

The scope of the containing block is divided into two cases:
- If the ancestor element is a block element, then the extent of the containing block is formed by the ancestor element's padding edge(padding boundaries);
- If the ancestor element is an inline element, the scope of the containing block is determined by the direction(direction) attribute of the ancestor element;

2 BFC and IFC

2.1 Basic Concepts

Any element of the page can be regarded as a box (box). There are two types of boxes: block boxes ( block-level box) and inline boxes ( inline-level box).

Note: In addition to block boxes ( block-level box ) and inline boxes ( inline-level box ), CSS3 adds a run-in box box .

Different elements and element displayproperties determine the type of box. formatting contextDifferent box types will be rendered according to their own formatting context ( ):
- A block box ( block-level box), that is, an element whose displayattributes are block, table, list-itemand , participates in a block-level format context ( Block Formatting Context, BFC for short);
- Inline box ( inline-level box), that is, elements whose displayattributes are inline, inline-block, inline-table, participate in line-level formatting context ( Inline Formatting Context, IFC for short);

2.2 What is BFC

BFC Block Formatting Context(block-level format context) is block-level boxthe rendering rule of the block box ( ). It is an independent rendering area inside the block box. This area specifies how the inside of the box is laid out, and this area is closed and has nothing to do with the external area. .

Create BFC

According to the W3C standard's definition of BFC, an element with any of the following conditions creates a new BFC:
- root element;
- float:left/rightthe floating element;
- position:absolute/fixedthe positioning element;
- displayA block element whose attribute value is inline-block, table-caption, ;table-cell
- overflow:auto/hidden/scrollElements;

Note: display:block/table The elements of will participate in the BFC, but will not create the BFC.

Features of BFC

According to the W3C standard, the rendering rules of BFC are summarized as follows:
- Inside the BFC, elements are arranged one by one in the vertical direction;
- Inside the BFC, the distance between two vertically adjacent elements is determined by the marginattribute, and the margin-topsum margin-bottomwill be superimposed;
- Inside the BFC, the left outer border ( margin-left) of an element is close to the left side ( ) of the container border-left, even for floating elements;
- BFC is an isolated box in the page, and the child elements inside the BFC will not affect the elements outside;
- When calculating the height of a BFC, the height of its internal floating elements will also participate in the calculation;

2.3 Purpose of BFC

Create a BFC to avoid vertical margin stacking

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrapper{
				width: 200px;
				border: 1px dashed gray;
				/*为wrapper创建BFC*/
				overflow: hidden;
			}
			
			/*为B创建BFC*/
			#bfc-box{
				overflow: hidden;
			}
			
			#A,#B{
				height: 60px;
				line-height: 60px;
				text-align: center;
				font-size: 30px;
				color-interpolation: #000;
				background-color: purple;
			}
			
			#A{
				margin-bottom: 20px;
			}
			
			#B{
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<!-- A处于为wrapper的BFC -->
			<div id="A"></div>
			<!-- B处于为bfc-box的BFC -->
			<div id="bfc-box">
				<div id="B"></div>
			</div>
		</div>
	</body>
</html>

Create BFC to clear float

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>创建BFC清除包含的浮动</title>
		<style type="text/css">
			.wrapper{
				width: 200px;
				border: 1px dashed gray;
				/*由于父容器没定义高度，会造成父容器高度塌陷，通过创建BFC解决，因为BFC在计算自身高度时会把子元素的高度计算进去*/
				overflow: hidden;
			}
			
			#first,#second{
				width: 80px;
				height: 40px;
				border: 1px solid brown;
			}
			
			#first{
				float: left;
			}
			
			#second{
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div id="first"></div>
			<div id="second"></div>
		</div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>创建BFC避免文字环绕</title>
		<style type="text/css">
			.wrapper{
				width: 400px;
				height: 200px;
				border: 1px solid gray;
				padding: 10px;
			}
			
			img{
				width: 40px;
				height: 40px;
				float: left;
			}
			
			#content{
				background-color: papayawhip;
				/*由于浮动的img层叠级别比普通文档流高，创建BFC后不会和同级的浮动元素重叠*/
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<img src="../img/weibo.png"/>
			<div id="content">【核电站事故102岁老人拒绝避难自杀 东电被下赔偿命令】东京电力福岛第一核电站事故发生后，在福岛县饭馆村自杀的102岁男性之遗属，向东电要求精神损失费等损害赔偿的诉讼判决，已于20日在福岛地方法院进行。判决命令东电支付1520万日元(约合人民币89万元)</div>
		</div>
	</body>
</html>

BFC creates adaptive two-column layout

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#sidebar{
				float: left;
				width: 100px;
				height: 150px;
				background-color: aliceblue;
			}
			
			#content{
				height: 200px;
				width: auto;
				background-color: #CCCCCC;
				/*创建BFC使得浮动元素不会覆盖自己*/
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="sidebar"></div>
		<div id="content"></div>
	</body>
</html>

3 stacking content (stacking context)

Understanding the stacking context provides insight into floating and positioning layouts, as well as z-indexcontrolling the stacking order of elements.
A stacking context contains two concepts: stacking context ( stacking content) and stacking level ( stacking level).

3.1 What is a stacking context

An element will create a new stacking context if it has any of the following conditions (regardless of CSS3):
- Root element : The <html>element creates a "root stacking context";
- z-indexautoA positioned element with a non-property value : only passing an z-indexattribute on an element will create a stacking context;

3.2 What is a cascading level

Have you ever thought about a question, z-indexattributes create a stacking context for an element, then the background color of the element, floating sub-elements, positioned sub-elements, etc., who is above and who is below, and what rules should be followed for stacking? The stacking level is the stacking rule for the same stacking context.

Note: Stacking context and stacking level are two different concepts

The priority of the cascading levels is sorted from high to low:
- z-indexsubelement whose value is a positive integer;
- z-indexa child element with a value of 0;
- The inline-level box of ordinary document flow: the inline element is the content, and the block element is the layout container, so the content is more important and the cascading level is higher;
- Floating box: non-positioned floating element;
- Block box: block-level box under normal document flow;
- z-indexSubelements whose value is a negative integer;
- backgroundBackground and border: The sum attribute of the current stacking context borderis decorative, and the stacking level is the lowest;

3.3 Features of stacking context

The stacking order of an element on the z-axis is determined by two factors: "stacking context" and "stacking level":
- In the same stacking context, the "internal element stacking level" is compared, the elements with large levels are displayed on the top, and the elements with small levels are displayed on the bottom;
- If the stacking level of the same stack is the same, the principle of "later comes first" is followed. For example, when z-indexthe value is the same, the later elements are stacked on top;
- Different stacking contexts are compared to "the stacking level of the parent element";

CSS advanced (8) - containing block/BFC+IFC

1 containing block

1.1 What is a containing block

1.2 Judgment and scope of the containing block

the containing block of the root element

containing block for fixed elements

containing block for static/relatively positioned elements

The containing block of an absolutely positioned element

the scope of the containing block

2 BFC and IFC

2.1 Basic Concepts

2.2 What is BFC

Create BFC

Features of BFC

2.3 Purpose of BFC

3 stacking content (stacking context)

3.1 What is a stacking context

3.2 What is a cascading level

3.3 Features of stacking context

Guess you like