CSS清除浮动的几种方式

傷城~ 2022-05-21 09:34 206阅读 0赞

**1.为父元素添加overflow：hidden**

**<div style="overflow:hidden">  
      <img src="images/search.jpg"/>  
       <img src="images/tel.jpg"/>  
      <img src="images/weixin.png"/>  
      <img src="images/nav\_left.jpg"/>**

**</div>**

**img\{  
     width:50px;  
     border:1px solid \#8e8e8e;  
     float:left;**

**\}**

**这种方法是先找到浮动元素的父元素，再在父元素中添加属性overflow:hidden,清除找到的父元素中的子元素浮动对页面的影响。一般不使用这种方式，因为overflow:hidden属性的特点是，离开了这个属性的区域会被隐藏，就是超出的部分会被隐藏。**

**2.浮动父元素**

**<div style="float:left">  
     <img src="images/search.jpg"/>  
     <img src="images/tel.jpg"/>  
     <img src="images/weixin.png"/>  
     <img src="images/nav\_left.jpg"/>**

**</div>**

**img\{  
     width:50px;  
     border:1px solid \#8e8e8e;  
     float:left;**

**\}**

**这种方式也不推荐，了解即可。**

**3.使用clear:both清除浮动，在所有浮动元素下方添加一个该属性，可以消除float的破坏性，但会增加不必要的标签。**

**<div>  
     <img src="images/search.jpg"/>  
     <img src="images/tel.jpg"/>  
     <img src="images/weixin.png"/>**

**     <img src="images/nav\_left.jpg"/>**

**       <div style="clear:both;"></div>**

**</div>**

**img\{  
     width:50px;  
     border:1px solid \#8e8e8e;  
     float:left;**

**\}**

**这种方法也不是很常用，但需要理解。**