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

This article introduces how CSS uses BFC rule layout to trigger the outer div package inner div processing, the content is very detailed, interested friends can refer to, hope to be helpful to you.

The concept of BFC

The full name of BFC is Block Formatting Context, which is literally translated into "block-level formatting context" and also translated as "block-level formatting scope". It is a concept in the W3C CSS 2.1 specification that determines how elements position their content, as well as their relationships and interactions with other elements. Popularly speaking, it is a div interior, and we use float and margin layout elements.

BFC layout rules:

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

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

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

The area of 4.BFC does not overlap with float box.

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

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

Create a BFC

A BFC can be explicitly triggered. If you want to create a new BFC, you just need to add any of the CSS styles mentioned above.

For example, look at the following HTML:

XML/HTML Code copies content to the clipboard

Some Content here

A new BFC can be created by adding any CSS style that triggers BFC to the container, such as overflow: scroll, overflow: hidden, display: flex, float: left, or display: table.

Display:table may cause some problems

Overflow:scroll may display unnecessary scroll bars

Float:left will place the element on the left side of the container, with other elements around it

Overflow:hidden will cut out the overflowed elements

So whenever we want to create a new BFC, we will choose the best style condition based on our needs. For consistency, I have used overflow: hidden in all the examples given in this article

CSS Code copies content to the clipboard

Container {overflow: hidden;}

You are free to use style declarations other than overflow: hidden.

Problems caused by BFC layout

Let's take a look at the problems caused by BFC layout.

For example, the following code

CSS Code copies content to the clipboard

Clear float .container {margin: 30px auto; width:600px; height: 300px;} .p {border:solid 3px # a33;} .c {width: 100px; height: 100px; background-color: # 060 Margin: 10px; float: left;}

What we want to see is:

The results are as follows:

Solution:

There are generally two solutions.

1. Clear the float using the clear property

two。 Make the parent container BFC

To clear the floating method, we can use the following methods:

Add a class to the parent element

XML/HTML Code copies content to the clipboard

1 2 3

Add the following CSS

CSS Code copies content to the clipboard

.floatfix {* zoom:1;} .floatfix: after {content: "; display:table; clear:both;}

This method is a better solution!

This is the end of how CSS uses BFC rule layout to trigger the outer div package inner div processing. I hope the above content can be helpful to you and learn more. If you think the article is good, you can share it for more people to see.

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.