CSS清楚浮动三种方法

前言：为何清除浮动？对于浮动的元素，其父类盒子的高度往往不能输入一个固定的值（因为很多网页内容有多有少），但如此就无法识别到浮动的元素，此时高度自动变成0，除去浮动的元素外的其他元素会挤压此父元素（出现本来是footer的元素被浮动元素压住的情况），故需清除浮动。

 

CSS中清楚浮动的三种方法：

 一、额外标签发（隔墙法）

找到最后一个浮动的元素，在他之后再添加一个盒子

例如：

<style>

.clear {

　　clear: both;

}

. 浮动的最后一个盒子 {

float: left;

}

</style>

<body>
<div class="father">

<div class="浮动的最后一个盒子"></div>

<div class="clear"></div>

</div>
</body>　

注意⚠️：最后样式为clear的元素一定为块级元素方可生效

 

优点：通俗易懂

缺点：添加了很多无意义的标签，结构性上表现较差

 

二、清除浮动之父元素OverFlow

 

 给浮动元素的父盒子添加 overflow:hidden | auto | scroll;

 

三、清除浮动之after子元素

 

 1  .clearfix:after {  
 2    content: ""; 
 3    display: block; 
 4    height: 0; 
 5    clear: both; 
 6    visibility: hidden;  
 7  } 
 8  .clearfix {  /* IE6、7 专有 */ 
 9    *zoom: 1;
10  }   
//需将上述该行代码粘贴入html文件
//需要调用时，给父亲盒子的class添加clearfix属性（调用）
<div class="father clearfix">
<div class="son"></div>
</div>

 

四、清除浮动之双伪元素

 

 

 1  .clearfix:before,.clearfix:after {
 2    content:"";
 3    display:table; 
 4  }
 5  .clearfix:after {
 6    clear:both;
 7  }
 8  .clearfix {
 9     *zoom:1;
10  }   
11 //将上述代码直接粘贴入html

调用时  同（三）

 

posted @ 2025-05-13 15:09  逃逸线LinesOfFlight  阅读(42)  评论(0)    收藏  举报