Home > Developer > Web Develop
Formatting Context: Refers to a rendering area on a page, and has a set of rendering rules that determine how its child elements are positioned and how they relate to and interact with other elements.
BFCBFC: block-level formatting context, which refers to a separate block-level rendering area that only block-level box participates in, which has a set of rendering rules to constrain the layout of block-level boxes and is independent of the outside of the area.
Generation of BFC:
Floating, absolutely positioned elements, and display properties for Inline-boxs, Table-cells, table-captions are not block containers of blocks (unless this value has been propagated to the viewport), And when overflow is not visible, a block box will create a new BFC for its contents.
Features of the BFC:
Example:
<! DOCTYPE html><!DOCTYPE html>
IfcIFC: Inline formatting context.
- In IFC, the box is arranged horizontally, starting at the top of its containing block. The horizontal margins, borders, and Paddin are reflected between these boxes. These boxes can be aligned in a vertical direction in different ways: bottom-aligned, top-aligned, or aligned with the baseline of the inner text. A row of rectangular areas containing these boxes becomes a line box.
- The width of the row box is determined by whether the containing block and (this line) exist float. The height of the row box is determined by the calculation rule for the row height.
- The height of the line box will always contain all the boxes contained in this line. However, the line box may even be taller than the highest box (for example, the box is aligned to lead to a baseline arrangement) (Translator Note: Not very well, the original boxes is aligned so, which baselines line up). When the height of box B is less than the line box containing it, the vertical alignment of B in the row box is determined by the "Vertical-align" property. When a line box cannot fit multiple inline boxes, they are broken into two or more vertical stacked row boxes. So, a paragraph is a vertical stack of reading a line box. The line boxes are stacked in a vertical direction (except where specified elsewhere) and they never overlap.
- Usually, the left edge of the line box clings to the left edge of its containing block, and the right edge clings to the right edge of the containing block. However, a floating box may appear between the edge of the containing block and the edge of the line box. Therefore, even though the usual case is the same width as a row box in a containing box, they may have different widths because of the existence of a float element. A row box in the same IFC usually has a different height (for example, one row may have a high picture, but the other lines have only text).
- When the sum of the widths of all inline boxes exceeds the width of the row box containing them, their horizontal arrangement is determined by the "Text-align" property. If the property value is "Justify", the user agent stretches the spaces and words in the inline box (out inline-table the box to drink inline-block).
- When an inline box is outside the width of a row box, it is split into multiple boxes, which are distributed across multiple line boxes. If the inline box cannot be split (for example, the inline box contains a single character or a specific language segmentation rule does not allow the split in the inline box, or if the inline box is affected by the value of the nowrap or pre white-space), the inline box removes the row box.
- When an inline box is split, margins, borders, and paddings are not reflected at the split.
- Inline boxes may be split into multiple lines within the same row box because of bidirectional text processing.
Attention:
- Inline,inline-block does not have a width property. The width is determined by the block of the package, and the newline is determined by the Word-wrap property
GFCGFC (GridLayout formatting contexts): Grid layout Formatting context
FfcFFC (Flex formatting contexts): Adaptive formatting context
Inline-block and floatCommon:
- Inline-block: is to set the display of an element as a block inline element, meaning that an element of the container inline display, and the contents of the block display; The inline property makes the element inline, the inline element is set to an invalid width, Adjacent inline elements show No line breaks on one line until the bank is full. Blocks will always have an exclusive row, with a block display, and can be set to a wide height. So the element of Inline-block is the width and height can be set, the adjacent element will be displayed on one line until the bank is full, that is, the container attribute of the element is block, the content is inline.
- Float: Sets the float of the element to the left or right, and when the element floats, the adjacent element fills a row according to its size, and wraps if the parent container is not wide enough. When we set the float of the element, this element is separated from the flow of the document, and the adjacent elements are arranged in a wrapping arrangement.
The common denominator is that both elements can be displayed on one line and the element size can be set freely.
Difference:
- Inline-block: Arranges a row horizontally, even if the element height is different, the height of the element height is high, even if the height of the element is empty around, there is no return to the second row of elements of the floating complement. You can set the default vertical pair of baseline lines.
- Float: The element is separated from the current document flow, arranged in a wrapping arrangement, if there is a gap in the upstream, and the current element size can be squeezed in, this element will be in the upstream complement arrangement. The default is top alignment.
Usage scenarios:
- Inline-block: When we want to set certain elements to be displayed on one line and aligned in the same direction, we try to use Inline-block as much as possible. Because the Inline-block element is still inside the current document flow, this reduces the program's change to the DOM, because every time the DOM changes, the browser redraws the DOM tree. In theory, performance consumption is increased. This does not have to be as troublesome as flaot, need to clear flaot.
- float: Even though Inline-block is preferred for layout, there are some business requirements that Inline-block cannot relate to, such as: There are two elements, we need a left, one to the right, this time we can only use float to achieve, for the novice, Will tangle float bad tune, more trouble, think to achieve the desired effect, need to adjust, sometimes we set the element to float, the order of the elements are changed, the moment is not clear to change the elements in the HTML sequence and so on. Because the browser parsing order is line-by-row parsing, when set two elements of the right float, the order in front of the element will be resolved first, he is right floating, then the element in front of the first to the right floating occupy position, the elements behind the next to be resolved to the right, then the order of the left, so that we see the sequence is Debugging is much more convenient.
css-formatting contexts (formatting context)
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
