BFC problem in css layout

1. Interview questions-bilateral distance (overlapping margins)

1. What is margin overlap?
2. Under what circumstances will overlapping margins occur?
3. How to resolve overlapping margins?

Margin overlap: If the margins of both boxes are set, then in the vertical direction, the margins of the two boxes will overlap, and the final result will be displayed on the page with the larger absolute value.

There are two cases of overlapping margins:

1. The margins of the parent-child relationship overlap

Parent-child relationship, if the child element has a margin, the parent element will also have a margin without turning the parent element into a BFC

Add overflow: hidden
to the parent element so that the parent element becomes BFC, and there will be no margins with the child elements

<style>
.out {
     
     
background-color: #f00;
width: 200px;
height: 200px;
}

.inner{
     
     
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blue;
}   
</style>
<div class="out">
    <div class="inner"></article>
</div>

2. Overlapping sibling relationships at the same level:

The outer margins of the elements of the same level will overlap in the vertical direction, and the final outer margin shall be the larger absolute value of the two.

  <style type="text/css">
            .fat {
     
     
                background-color: #ccc;
            }
            .fat .child-one {
     
     
                width: 100px;
                height: 100px;
                margin-bottom: 50px;
                background-color: #f00;
            }

            .fat .child-two {
     
     
                width: 100px;
                height: 100px;
                margin-top: 20px;
                background-color: #345890;
            }
        </style>
   <section class="fat">
        <div class="child-one"></div>
        <div class="child-two"></div>
    </section>

You can add empty elements or pseudo-type elements to set overflow: hidden; to solve the problem of margin overlap

2. Answer the margin overlap—BFC

What is BFC?

BFC means " 块级格式化上下文", BFC is an independent layout environment, which protects the internal elements from external influences and does not affect the external. BFC itself is a CSS layout method, but we can use it to solve the problem of margin folding. BFC is not created specifically to solve this problem;

How to trigger BFC?

When the box attribute value is these, the box to which it belongs will generate BFC.

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

You can also use the elimination method:

The value of overflow is not visible;
the value of position is not static or
the value of relative float is not none
The value of display is inline-block or table-cell or flex or table-caption or
inline-flex

The principle of BFC? (Don't talk about it in the interview, but understand it)

1. The boxes inside the BFC will be placed one by one in the vertical direction. Margin overlap also occurs in the vertical direction.
2. BFC is an independent container on the page. The child elements inside the container will not affect the outside elements, and the outside will not affect the inside.
3. The area of ​​BFC will not overlap with float.
4. When calculating the height of the BFC, floating elements are also counted.

Application of BFC

1. Can be used for adaptive layout

Using this principle of BFC, a two-column layout can be realized, with fixed width on the left and adaptive on the right. Will not affect each other, even if the heights are not equal.

Add overflow: hidden to right; make it a BFC to eliminate the influence of external left due to floating

<!-- BFC不与float重叠 -->
<section id="layout">
        <style media="screen">
          #layout{
     
     
            background: red;
            height: 200px;
          }
          #layout .left{
     
     
            float: left;
            width: 100px;
            height: 80px;
            background: blue;
          }
          #layout .right{
     
     
            height: 100px;
            background:green;
            overflow: hidden;
          }
        </style>
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

2. Can clear the float:

add parent element overflow:hidden/auto, change BFC

<!-- BFC子元素即使是float也会参与计算 -->
      <style>
        #out{
     
     
          background: red;
          border: 1px solid black;
          overflow: hidden;
        }
        #inner{
     
     
          float: left;
           width: 200px;
           height: 200px;
           background-color: blue;
        }
      </style>
    <div id="out">
        <div id="inner">我是浮动元素</div>
    </div>

3. Solve the overlap of vertical margins:

See case above