css清除浮动的几种方法

水深无声 2023-07-07 12:31 32阅读 0赞

*  ##### 额外标签法（使用带clear属性的空元素） #####

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

*  ##### 父元素添加overflow属性 #####

overflow:hidden|auto|scroll

*  ##### 使用after伪元素 #####

.clearfix:after { 
    	content:"";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    }
    .clearfix { 
    	*zoom:1; /*IE6 7专有*/
    }

*  ##### 双伪元素 #####

.clearfix:before,.clearfix:after {  
      content:"";
      display:table; 
    }
    .clearfix:after { 
     clear:both;
    }
    .clearfix { 
      *zoom:1;
    }

##### 总结 #####

<table> 
 <thead> 
  <tr> 
   <th>清除浮动的方式</th> 
   <th align="left">优点</th> 
   <th align="left">缺点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>额外标签法</td> 
   <td align="left">通俗易懂，书写方便</td> 
   <td align="left">添加许多无意义的标签，结构化较差。</td> 
  </tr> 
  <tr> 
   <td>父级overflow:hidden;</td> 
   <td align="left">书写简单</td> 
   <td align="left">溢出隐藏</td> 
  </tr> 
  <tr> 
   <td>父级after伪元素</td> 
   <td align="left">结构语义化正确</td> 
   <td align="left">由于IE6-7不支持:after，兼容性问题</td> 
  </tr> 
  <tr> 
   <td>父级双伪元素</td> 
   <td align="left">结构语义化正确</td> 
   <td align="left">由于IE6-7不支持:after，兼容性问题</td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，32人围观）

还没有评论，来说两句吧...

相关阅读

相关清除浮动的几种方法

为什么要清除浮动呢？清除浮动的本质是什么？清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。清除浮动的几种方法： 1. 额外标签法：给谁清除

偏执的太偏执、/ 2023年07月18日 14:23/ 0 赞/ 19 阅读

相关 css清除浮动的几种方法

额外标签法（使用带clear属性的空元素） <div style="clear:both"></div> 父元素添加overflow属性

水深无声/ 2023年07月07日 12:31/ 0 赞/ 33 阅读

相关 css浮动(float)及清除浮动的几种实用方法

CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档

梦里梦外;/ 2023年06月10日 10:25/ 0 赞/ 11 阅读

相关清除浮动的几种方法

1. 浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中

柔情只为你懂/ 2022年11月12日 13:52/ 0 赞/ 199 阅读

相关 [CSS] - 几种清除浮动的方法总结

背景有两个div父盒子, 内部子元素是浮动的: ![在这里插入图片描述][20210630155622902.png] <!DOCTYPE html>

布满荆棘的人生/ 2022年10月11日 12:17/ 0 赞/ 236 阅读

相关清除浮动的几种方法

1.浮动元素下加空div 为了统一样式，我们新建一个样式选择器class命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“</div>”

迷南。/ 2022年08月05日 01:17/ 0 赞/ 205 阅读

相关 css浮动(float)及清除浮动的几种实用方法

[css浮动(float)及清除浮动的几种实用方法][css_float] CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起

小鱼儿/ 2022年06月01日 13:15/ 0 赞/ 787 阅读

相关清除浮动的几种方法

浮动产生负作用 1.背景颜色不能使用子元素float ，如果父元素设置了background，而父级不能被撑开，所以导致背景颜色不能显示 2.边框不能撑开如果父

心已赠人/ 2022年05月10日 01:36/ 0 赞/ 249 阅读

相关 css 浮动清除的几种方式

css浮动清除的几种方式 1.在父级div中定义伪类此方法的优点适用于大多数浏览器，对于初学者首先理解起来有些困难，通常使用这种方法时需要见一个公共的类来清除浮动

谁践踏了优雅/ 2022年02月22日 02:52/ 0 赞/ 285 阅读

相关清除浮动的几种方法

标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，

女爷i/ 2021年11月11日 13:22/ 0 赞/ 348 阅读