float脱离文档流，清除浮动

Posted 2020-09-17

 1 <style type="text/css">
 2         .main{width: 400px;  margin: 0 auto; background-color: blue;}
 3         .left,.right {float: left;  width: 180px; height: 500px;}
 4         .left{background-color: green;}
 5         .right {background-color: silver;}
 6 </style>
 7 
 8 <div class="main">
 9     <div class="left">左列</div>
10     <div class="right">右列</div>
11 </div>

1、为浮动元素的父元素设置高度；

1 .main{height: 500px;}

缺点：在浮动元素高度不确定的时候不适用
2、结尾处加空标签

（1）div标签 clear:both；

1 .clear{clear: both;}
2 
3 <div class="main">
4     <div class="left">左列</div>
5     <div class="right">右列</div>
6     <div class="clear"></div>
7 </div>

（2）br标签clear:both；

1 br{clear: both;}
2 
3 <div class="main clear-float">
4     <div class="left">左列</div>
5     <div class="right">右列</div>
6     <br />
7 </div>

3、父级div定义 overflow:hidden；

1 .main{overflow: hidden;}

4、主流方法：父级div定义 伪类:after 和 zoom 

 1 <style type="text/css">
 2         .main{width: 400px;  margin: 0 auto; background-color: blue;}
 3         .left,.right {float: left;  width: 180px; height: 500px;}
 4         .left{background-color: green;}
 5         .right {background-color: silver;}
 6         .clear-float:after{display: block; clear: both; content: ""; visibility: hidden;height: 0; overflow: hidden;}
 7         .clear-float{zoom: 1;}
 8 </style>
 9 
10 <div class="main clear-float">
11     <div class="left">左列</div>
12     <div class="right">右列</div>
13 </div>

5、父级div一起浮动；

（1）定义 overflow:auto；

1 .main{overflow: auto;}

（2）设置float

1 .main{float: left;}

6、父级div定义 display:table 

1 .main{display: table;}