A few days ago in the garden to see the article when I saw the concept of BFC, for the small white I say that is quite strange, so Baidu a bit. The result is still a lot of, it does not seem to be a obscure knowledge. So to summarize some of the results and understanding of the search.
So, what's BFC? BFC is a shorthand for block-level formatting contexts (block formatting context) that is used to standardize the layout of block-level containers. The main features are the following points:
1. Isolate space. So that the layout inside and outside the BFC does not affect each other (personal guess, when writing some UI control should not be the mouth crooked layer set a BFC, I hope that the great God to explain it)
The elements in the 2.BFC are arranged from top to bottom, as high as possible (the margin in the vertical direction of the sibling element is collapsed, the problem was often encountered, always considered to be a bug), the arrangement of the water product direction
The direction is aligned by your level The way determines, the margin of the child element and the border that clings to the BFC
The area of 3.BFC does not overlap with the area of the floating element
The height of the floating element is calculated at the height of the 4.BFC area.
Having said so many features, how do you build a BFC? From the introduction, you can get:
Floats, absolutely positioned elements, block containers (such as Inline-blocks, Table-cells, and table-captions) that is Not block boxes, and blocks boxes with ' overflow ' and "other than ' visible ' (except if that value have been propagated to the Viewport) Establish new block formatting contexts for their contents.
The approximate meaning is: floating elements, absolute positioning elements, block-level containers of non-block-level boxes (such as Inline-block,table-cells, and table-caption) and overflow block-level boxes that are not visible will create a BFC for their child elements. The code is:
Float:left|right;
position:absolute|fixed;
Display:inline-block|table-cells|table-captions;
Overflow:hidden;
So there's one more question to note about block-level containers for non-block boxes? Since it is a block-level formatting context, why not include block-level boxes? My understanding is that in a page, block-level boxes are mostly, especially div+css layout, the entire page may have hundreds of block-level boxes, so that the entire page is divided into hundreds of BFC. Because the BFC has internal and external isolation characteristics, it can lead to more difficult layout?
Tell a lot of theories, what is the use of BFC? What problems can be solved? This is what we are most concerned about (as the saying goes, the theory that does not solve the problem is a rip-off egg). All I know is two, others welcome to add:
1. Clear float
Depending on the height of the BFC, the height of the floating element is calculated and the BFC is isolated from the inside and outside layout (I guess ...). It is known that the height of the BFC is equal to the height of the floating element when there is a floating element within the BFC and the height of the floating element is higher than all other elements. For the sake of explanation, come to the last picture.
This is the state when the BFC is not created, and the corresponding code is:
<Head><MetaCharSet= "Utf-8"><title>BFC</title><style>. BFC{margin:100px 0;background:#777;Overflow:Hidden; }. Float{float: Left;width:100px;Height:200px;background:Green;Opacity:. 6;Color: White; }. Default{width:300px;Height:100px;background:Red; }</style></Head><Body> <Divclass= "BFC"><Divclass= "float">Float</Div><Divclass= "Default">Default</Div></Div></Body>
As you can see, the height of the outer. BFC is equal to the height of the. Default, floating elements are not counted, resulting in a high degree of collapse.
Take a look at this one, on the outside. FBC creates an effect after BFC
. BFC { margin: 100px 0; background: #777; overflow: hidden; }At this point, the float is cleared, and the height of. Float is calculated within the. BFC. Never understand why overflow can clear floating, in fact, because of BFC help.
2. Resolving the issue of margin failure between child elements and parent elements
Let's look at the following code
1 <Head>2 <MetaCharSet= "Utf-8">3 <title>BFC</title>4 <style>5 . BFC{width:200px;Height:200px;margin:10px Auto;background:#ddd}6 . Bfc>div{width:100px;Height:100px;margin:50px;background:Green} 7 </style>8 </Head>9 <Body>Ten <Divclass= "BFC"> One <Div></Div> A </Div> - </Body>
What do you think the effect is? Is that right?
I look like yes, but what about the results?
This is the right answer, why? Let's take a look at the characteristics of BFC. BFC elements in the vertical direction will be as close as possible, so that the margin-top of the child element clings to the parent element's border-top, resulting in the margin between the parent and child elements disappear. This is a problem I used to encounter before, the solution was to use padding instead of margin, but there are still some small problems, such as I want to give a child element a border-bottom, but the width of border-bottom throughout the parent element. The final alternative solution is that the parent element is used with margin and padding, and the child elements are not set at all. After reading BFC understand, as long as the parent element set Overflow:hidden for it to create BFC after the problem is resolved.
All right. I know BFC is like this, there may be a lot of features I do not know, again welcome master correction.
Take a look at the time ... Write for 1 hours and see if the article looks like it's not long. Should be the first time to write the reason for it!! Take a break and you can have lunch.
BFC Help with Layouts
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
