This article mainly and we introduce the CSS in the BFC and IFC usage of relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.
What's a BFC?
As with all the previous blog posts, or start from what point of view, the understanding of BFC.
The so-called formatting context (the formatting contexts), which is a concept in the CSS2.1 specification.
It is a rendered area in the page and has a set of rendering rules.
It determines how its child elements will be positioned, and the relationships and interactions with other elements.
The Block formatting contexts (BFC, block-level formatting context) is a rendering rule for the blocks-level element. In layman's words, BFC can be understood as a closed large box, and the child elements inside the container do not affect the outer elements, but vice versa.
The layout rules for BFC are as follows:
1 inside the box will be in the vertical direction, each place;
2 BFC is a separate, isolated container on the page;
3 the upper and lower margin of the two adjacent box belonging to the same BFC overlap;
4 when calculating the height of the BFC, floating elements are also involved in the calculation
5 The left side of each element, in contact with the left side of the contained box, even if there is a float;
6 The BFC area does not overlap with float;
So how do you trigger BFC? The BFC feature is triggered whenever an element satisfies any of the following conditions:
Body root element;
Floating element: Float is not a property value of none;
Absolute positioning elements: position (absolute, fixed)
Display: Inline-block, Table-cells, Flex
Overflow values other than visible (hidden, auto, scroll)
Characteristics and application of two BFC
The following describes the common features and applications of BFC, which, when explaining why, will use the above layout rules and trigger conditions, so be careful.
12 adjacent normal streams in the vertical direction of the block element will collapse the margin
<HEAD>.P { width:200px; height:50px; margin:50px 0; background-color:red; }Is:
According to article 3rd of the BFC rule:
The vertical distance of the box is determined by margin,
The + up and down margin of the + two adjacent box that belong to the same BFC overlap.
The above example has a margin collapse because they belong to the body root element, so we need to let them not belong to the same BFC, we can avoid the margin collapse:
<p class= "P" ></p> <p class= "wrap" > <p class= "P" ></p> </p>. wrap { overflow:hidden; . p { width:200px; height:50px; margin:50px 0; background-color:red;Is:
2 BFC can contain floating elements (clear float)
Normally, floating elements are separated from the normal document flow, so the following code:
<p style= "border:1px solid #000;" > <p style= "width:50px; height:50px; background: #eee; Float:left; " > </p></p>The outer p will not contain the internal floating p, as shown in the following:
But if we trigger the BFC of the outer container, according to the 4th in the BFC specification: when calculating the height of the BFC, the floating element is also involved in the calculation, then the outer p container can wrap the floating element, so as long as the code is modified as follows:
<p style= "border:1px solid #000; Overflow:hidden" > <p style= "Width:100px;height:100px;background: #eee; Float:left; " ></p></p>You can complete the following effects:
3 BFC can prevent elements from being overwritten by floating elements
Let's look at an example:
<p class= "Aside" ></p> <p class= "main" ></p> p { width:300px; } . aside { width:100px; height:150px; Float:left; Background:black; } . Main { height:200px; background-color:red; }Is:
This is because Rule 5 above: the left side of each element touches the left side of the containing box, even if there is a float;
So to change the effect, so that its complementary interference, you have to use the rule 6:bfc area will not overlap with float, let <p class= "main" > can also trigger the nature of BFC, namely:
. main { Overflow:hidden; height:200px; background-color:red; }In this way, it is possible to implement two columns of adaptive layouts.
Three Brief introduction IFC
IFC Layout Rules:
The 1 box starts at the top of the containing block and is placed horizontally one after the other.
2 When these boxes are placed, they are taken into account in the space occupied by the inner and outer margins + borders in the horizontal direction, and in the vertical direction, the boxes may be aligned in different forms: horizontal margin, padding, border are valid, and vertical is not valid. Cannot specify width height;
3 The width of the row box is determined by the inclusion block and the presence of the float, and the height of the row box is determined by the row heights.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
