Clear floating mode

problem

html：

<div class="f-box">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>

css：

      .f-box {
    
        background-color: pink;
      }
      .box1, .box2 {
    
        width: 200px;
        height: 200px;
      }
      .box1 {
    
        float: left;
        background: tomato;
      }
      .box2 {
    
        float: left;
        background: greenyellow;
      }

effect ：
The parent element is not opened , So it doesn't show up .

terms of settlement

One 、 Add an empty tag

Add an empty label at the end of the element and set the style clear: both
html：

<div class="f-box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div style="clear: both"></div>
    </div>

Two 、 Set the parent element to BFC

Set the parent element style overflow: hidden; perhaps display: flex; wait . establish BFC

      .f-box {
    
        background-color: pink;
        overflow: hidden;
      }

3、 ... and 、 Use pseudo elements

Set parent element after Pseudo-element clears the float
In fact, this method is similar to the first one , Just use as element instead of empty tag

.f-box::after{
    
	content:'';
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

After the solution