1. Add height to parent element:
<div>
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>
</div>As abbreviated as above, just set height: 200px to the parent element
2. Add a div to clear the float at the end, but this method writes one more label and is not recommended:
<div>
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>
<div class="clear:both"></div>
</div>3. Add over-flow: hidden to the parent element
<div>
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>0
</div>Just add over-flowLhidden to the parent element
4. Pseudo-class elements: commonly used by Netease and Sohu
但是为了兼容IE6，IE7 要加上.clearfix{zoom:1}
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
<div class="clearfix">
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>0
</div>5. The clear floating style encapsulated by the bootstrap framework, unless this framework is used, the above four are enough
<div class="clearfix">
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>0
</div>To apply this framework, you only need to add class="clearfix" to the parent element, and you don't need to write any style.
6. Double pseudo-element millet, commonly used on Taobao
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 600px;
height: auto;
border:1px solid red;
}
.child1,.child2{
background: pink;
width: 250px;
height: 250px;
float: left;
}
.clearfix:before,.clearfix:after{ /*真正意义上的闭合浮动*/
display: table;
content: "";
}
.clearfix:after{
clear:both;
}
.clearfix{ //IE6
zoom:1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child1">哥哥</div>
<div class="child2">妹妹</div>
</div>
</body>
</html>