当前位置：网站首页>How to clear floating?

How to clear floating?

2022-07-05 11:57:00 【Xiongba is also】

The influence of floating is not cleared

The internal height of parent element caused by child floating is 0
The height of the sibling element of the parent element is 0, Other styles cannot be implemented

Code

<body>
  <div class="father">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
  <div class="friend">friend</div>
</body>

.child1,.child2,.friend{
    
  width:50px;
  height:50px;
}

.child1{
    
  float:left;
  border:1px solid blue;
}

.child2{
    
  float:left;
  border:1px solid green;
}

.friend{
    
  border:1px solid red;
}

.father{
    
  border:1px solid black;
}

Method 1： Add... To the parent element .clearfix

Code

<body>
  <div class="father clearfix">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
  <div class="friend">friend</div>
</body>

.child1,.child2,.friend{
    
  width:50px;
  height:50px;
}

.child1{
    
  float:left;
  border:1px solid blue;
}

.child2{
    
  float:left;
  border:1px solid green;
}

.friend{
    
  border:1px solid red;
}

.father{
    
  border:1px solid black;
}

.clearfix:after{
    
     content: '';
     display: block; /* perhaps  table*/
     clear: both;
 }
.clearfix{
    
  zoom: 1; /* IE  compatible */
}

design sketch

Method 2： Add... To the parent element overflow:hidden

Code

<body>
  <div class="father">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
  <div class="friend">friend</div>
</body>

.child1,.child2,.friend{
    
  width:50px;
  height:50px;
}

.child1{
    
  float:left;
  border:1px solid blue;
}

.child2{
    
  float:left;
  border:1px solid green;
}

.friend{
    
  border:1px solid red;
}

.father{
    
  border:1px solid black;
  overflow:hidden
}