bfc properties

see the Demo. As the example above, the blue-background div uses Overflow:hidden to trigger the BFC, which is not covered by its sibling floating element, but is next to it. It is worth noting that the above situation is simply the sum of the element width and not exceeding the width of the parent element. Assuming that the width of the floating element and its non floating sibling elements do not exceed the width of the parent element, but when the

What this article brings to you is about what is BFC? What is the use of BFC in CSS? , there is a certain reference value, the need for friends can refer to, I hope you have some help. What is BFC (Block formatting Context) Formatting context (format context) is a concept in the CSS2.1 specification. It is a rendered area of the page and has a set of rendering r

Floating and absolute positioning elements, block-level containers of non-block-level boxes (e.g. Inline-blocks, table-cells, and Table-captions), and block-level boxes with overflow values not "visiable", Will create a new block-level formatting context for their content. In a block-level formatting context, the box is vertically arranged one by one from the top of the containing block, and the vertical gap between the two boxes is determined by their margin value. The vertical margins of t

Analysis of BFC and Analysis of bfc What is BFC? Dung boy? Of course not. BFC: The English name of Block formatting context ". It is a concept in the W3C CSS 2.1 Standard that determines how elements locate content and the relationship and interaction with other elements. The following table describes the features of t

BFC layout principle, bfc Layout The original intention of writing this blog is to solve the floating problem, so I thought about what BFC is and why it can be cleared. I don't know the results, but I don't know what it means. I want to study it and summarize my learning experience. 1. What is BFC?

Adaptive Layout of BFC width, Adaptive Layout of bfc width Speaking of Adaptive Layout, we have learned in the article "Adaptive Layout of the width of the discussion. At that time, the core idea was to use float + margin. Based on the fluid characteristics of block elements, the width of float elements is calculated and assigned to the corresponding margin of block elements. But there is a drawback in doin

Analysis of the magical BFC principles in the front end and the front-end bfc principles In the past, when people had heard the word "bfc" in their self-adaptive layout, they read various articles about "bfc" and found that the introduction of "Dream sky" is good. Today, we will polish it on his basis.1. What is

outer elements and vice versa. We can use this feature of BFC to do a lot of things. 4.1 Block elements are covered by floating elements A block element of a normal document flow may be overwritten by a float element, crowding out the normal flow of the document, so you can set the float, display, position value of an element to trigger BFC to prevent it from being overwritten by a floating box.View Demo 4

Learn about floating and BFC collation and floating bfc collationThis is my understanding and arrangement after learning. If you have any errors or questions, please correct them and I will keep updating them! Document Stream concept:In html, block elements occupy a single row by default, arranged from top to bottom, that is, the Document Stream we are talking about; Concepts of Document Stream separation:

The outer margin and BFC distance of BFC are folded.Problem description: Set margin-bottom in the sub-element. The value of this margin-bottom does not act on the sub-element, but will be transferred to the outer div, as shown below. EffectWhy does this happen? The root reason is that the BFC outer margin is folded. What is the outer margin.

Clear float of BFC clear, bfc float In our daily Code life, we will more or less use floating layout, such as navigation layout, as shown in: However, we often encounter parent element collapse and floating clearance issues during implementation. For example The child element (green) in is not wrapped by the parent element (Pink Line), which is the collapse problem. The black div in should be under two gr

. This way the margin of the element does not overlap with the margin of the parent element. BFC does not overlap floating elements BFC can contain floating We can use BFC's third feature to "clear the float", here actually said that the float is no longer appropriate, it should be said to contain floating. That is, as long as the parent container form BFC