Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

What is theBFC

Block Formatting Context (BFC) is a CSS rendering mode for the layout of a box model in a Web page. It refers to an independent rendering area or an isolated independent container.

The formation ofBFCThe conditions of the

  1. The root elementhtml
  2. Float element,float 除 noneValues other than;
  3. Positioning elements,position(absolute.fixed);
  4. displayIs one of the following valuesflex.inline-block.table-cell.table-caption;
  5. overflowIn addition tovisibleValues other than (hidden.auto.scroll);

BFCThe characteristics of the

  1. The internal boxes will be placed one after the other vertically.
  2. The distance in the vertical direction frommarginDetermines that margins of two adjacent labels belonging to the same BFC will overlap (parent-child margins overlap, sibling margins overlap)
  3. BFCThe area will not be withfloatElement regions overlap.
  4. To calculateBFCWhen the float element is also involved in the calculation
  5. BFCIt is a separate container on the page, and the child elements inside the container do not affect the external elements, and the external tags do not affect the BFC internal tags

BFCProblem solved

Margin fold, according toFeature 2, so that labels in different BFC areas do not overlap

  1. Parent and child margin overlap: Sets the attribute that generates the BFC for the parent element
  2. Sibling margin overlap: Add a layer of BFC parent to any of them
<div> <div className="div5"> </div> <div className="div6"></div> </div>.div5 { background-color: bisque; margin: 10px; } .div6 { height: 30px; width: 50px; margin: 10px; background-color: blue; }Copy the code

Take a look at the following two images:

  • Parent and child margins overlap
  • Brother margins overlap


Solution:

  • Sets the parent element toBFCattribute
.div5 { background-color: bisque; margin: 10px; Display: inline-block; /* margin-top: 0px; padding-top: 10px; * /}Copy the code

  • Sets a layer for child elementsBFC
<div className="div5"> <div className="div6"></div> <div style={{display: "Flex"}} > {/ * as child elements set a layer of landing the * /} < div className = "div6" / > < / div > < / div >Copy the code

Implement adaptive two – or three-column layoutsFeatures 3

  1. BFCAchieve a two-column layout with a fixed width on the left side and an adaptive right-side column (zoom in and out as the browser changes in size)
  2. Three column layout, the left and right columns are fixed width, the middle column is adaptive

See here for an example: How to implement a two-column layout

Prevent text from wrapping around the image (Features 3 )

  1. Floating elements will overwrite non-floating elements, and text will be arranged around the image. Set the tag of the text to BFC to avoid the effect of text wrapping
</h3> <img style={{float: 'left', width: '200px'}} src='https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07cf66626683495398c362c112f53983~tplv-k3u1fbpfcp-watermark.image' /> <div style={{width: '300px', backgroundColor: 'bisque'}}> Writing an article is not easy. Give it a star and a thumbs up. Writing an article is not easy. Give it a star and a thumbs up. Writing an article is not easy. Give it a star and a thumbs up. Writing an article is not easy. Give it a star and a thumbs up. Writing an article is not easy. Give it a star and a thumbs up. </div>Copy the code

Solution:

Set the text content to BFC:

float: 'left' | display: 'flex' | display: 'inline-block' 

</h3> <img style={{float: 'left', width: '200px'}} src='https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07cf66626683495398c362c112f53983~tplv-k3u1fbpfcp-watermark.image' /> <div style={{width: '300px', backgroundColor: 'bisque', display: 'inline-block'}}> It's not easy to write an article, give it a star and like. Writing an article is not easy. Give it a star and a thumbs up. Writing an article is not easy. Give it a star and a thumbs up. Writing an article is not easy. Give it a star and a thumbs up. Writing an article is not easy. Give it a star and a thumbs up. Writing an article is not easy. Give it a star and a thumbs up. </div>Copy the code

Remove the floatingFeatures 4

  1. throughBFCClear float, calculateBFCFloat child elements also participate in the calculation, such as adding to the float element’s parentoverflow:hidden

conclusion

If this article helped you, please like 👍 and follow ⭐️.

If there are any errors in this article, please correct them in the comments section 🙏🙏.