Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge of what the block-level format in CSS is. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

1.BFC definition

BFC (Blockformattingcontext) is literally translated as "block-level formatting context". It is a separate rendering area, only Block-levelbox (block-level elements) participate, it specifies how the internal Block-levelBox layout, and has nothing to do with the outside of the area.

Popularly speaking: the element that created the BFC is a separate box, and the child elements in it are not on the layout.

Affect the external elements (no matter how the layout inside will affect the external), BFC still belongs to the ordinary flow in the document.

Generation of 2.BFC:

Know how BFC triggers BFC.

BFC can be triggered and changed to BFC if one of the following conditions is met

Root element

The float property is not none

Position is not static and relative

Overflow is not visible

Display is inline-block,table-cell,table-caption,flex,inline-flex

You will find that BFC is everywhere, but you don't know it when you use it.

3.BFC layout rules:

What are the characteristics after being transformed into BFC?

The internal Box will be placed vertically, one after another.

The vertical distance of the Box is determined by the margin. The margin of two adjacent Box belonging to the same BFC will overlap.

The left side of the marginbox of each element touches the left side that contains the block borderbox (otherwise vice versa for left-to-right formatting). This is true even if there is a float.

The area of BFC does not overlap with floatbox.

BFC is an isolated container on the page, and the child elements inside the container do not affect the outer elements. And vice versa.

Floating elements also participate in the calculation when calculating the height of the BFC

4.BFC function:

Use it, comeboby

1. Prevent outer margins from overlapping

Bfc causes margin overlap that belongs to child elements in the same bfc (the vertical distance of the Box is determined by the margin. The margin of two adjacent Box belonging to the same BFC will overlap)

Problem: as you can see from the figure, there is only 20px's margin between String1 and String2, which is supposed to be 40px, but this leads to their margin overlap in bfc

Code:

.container1 {

/ * bfc*/ can be created through overflow:hidden

Overflow:hidden

Background-color:red

Width:300px

}

.sub1 {

Margin:20px0px

Background-color:#dea

}

String1

String2

Solution: we can wrap a container around the div and trigger the container to generate a BFC. Then two div do not belong to the same BFC, and margin overlap will not occur.

Code:

.newbfc {

Overflow:hidden

}

String1

String2

two。 Clear floats:

Problem: when the child elements of the element are floating, there will be a high collapse, that is, the height of the parent container will not be stretched open.

Code:

.pre2 {

Width:200px

Border:2pxsolidred

}

.float1, .float2 {

Width:100px

Height:100px

Float:left

}

.float1 {

Background-color:#dee

}

.float2 {

Background-color:#dcc

}

Solution:

Bfc's rule: when calculating the height of BFC, floating elements also participate in the calculation, so as long as the parent container is set to bfc, child elements can be included:

The container will contain floating child elements, and its height will be extended to include its child elements, and in this BFC, these elements will return to the regular document flow of the page.

.pre2 {

Width:200px

Border:2pxsolidred

/ * set overflow*/

Overflow:hidden

}

3. Solve layout: prevent text wrapping

Code:

.container2 {

Overflow:hidden

Width:200px

}

.box {

Float:left

Width:100px

Height:30px

Background-color:#daa

}

Sdfadsfdfffffffffdsfsfffffsfdfsdsdfsdffffffff

The p element does not move, but it appears below the floating element. The lineboxes of the p element (which refers to the line of text) is shifted. The horizontal contraction of the lineboxes here provides space for floating elements.

The rule of bfc: the left side of the marginbox of each element touches the left side that contains the block borderbox (for left-to-right formatting, otherwise vice versa). This is true even if there is a float.

To solve this problem, just add the p element to overflow:hidden to make it a new bfc.

These are all the contents of the article "what is the block-level format in CSS?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.