如何清除浮动

  正常的块级元素默认会独占一行,我们可以通过浮动的方式来使其脱离文档流,横向排列。但是浮动如果不及时清除,就会影响下一个元素的表现。所以我们要及时地清除浮动。那么如何清除浮动呢?

  首先说明,我们要的是真真正正的清除,不是撑起父元素,所以像为父元素设置高度,这种做法我不提倡。

  方法一:

  如果上一个元素是一个浮动元素,我们可以在其后面放置一个‘clear’元素,即将一个空元素设置成clear:both;这样之前的浮动效果就到此为止了。这样做还有一个好处就是,如果父元素没有设置宽和高,浮动元素不在文档流中,不会将父级元素撑起来。但是clear元素会将它撑起来。

  方法二:

  比较高端的方法,利用BFC特性。

  我们使用overflow:hidden;触发BFC。使父元素强行包裹浮动元素,并隔绝内外环境。外面的元素不会受里面浮动元素影响。

  方法三:

  为父元素设置高度,还是因为浮动元素不会撑起父元素,父元素是空的,是扁的。我们手动设置高度为浮动元素占位。

  方法四:

  父元素也浮动,我不提倡这种做法。

  方法五:

  父级div定义 伪元素:after 和 zoom

  

 1 .div1 {
 2     background-color:#0000ff;
 3     border:1px solid red;
 4 }
 5 
 6 .div2 {
 7     background-color:#ff0000;
 8     border:1px solid red;
 9     height:100px;
10     margin-top:10px;
11 }
12  
13 .left {
14     float:left;
15     width:20%;
16     height:200px;
17     background-color:#cccccc;
18 }
19 
20 .right {
21     float:right;
22     width:30%;
23     height:80px;
24     background-color:#cccccc;
25 }
26  
27 /*清除浮动*/
28 .clearfloat:after {
29     display:block;
30     clear:both;content:"";
31     visibility:hidden;
32     height:0;
33 }
34 
35 .clearfloat {
36     zoom:1;
37 }
1 <div class="div1 clearfloat"> 
2     <div class="left">左左</div> 
3     <div class="right">右右</div> 
4 </div>
5  
6 <div class="div2">第二个div</div>

  

/*伪元素的方法不建议初学者使用*/

   方法六:

  将父元素设置为表格,同样不提倡。

原文地址:https://www.cnblogs.com/webARM/p/3781832.html