主页 / 建站知识 /

css清除浮动clearfix:after的用法详解（附完整代码）

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设

网上常用的完整代码

CSS Code复制内容到剪贴板
  1. .clearfix:before, .clearfix:after {   
  2.     content:"";   
  3.     display:table;   
  4. }   
  5. .clearfix:after{   
  6.     clear:both;   
  7.     overflow:hidden;   
  8. }   
  9. .clearfix{   
  10.     zoom:1;   
  11. }  


如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开。
解决方法
 
CSS代码

CSS Code复制内容到剪贴板
  1. .clearfix:after {                 
  2. content: "." ;                    
  3. display: block ;   
  4. height: 0 ;   
  5. clear: both ;   
  6. visibility: hidden ;   
  7. }   
  8. .clearfix{ display: inline-block; }   
  9.       /  Hides from IE-mac  \/         
  10. html .clearfix{ height:1%; }   
  11. .clearfix{ display:block; }   
  12.      /  End hide from IE-mac   \/  
  13.      
  14. //clearfix的CSS使用了after这个伪对象   
  15. //应用clearfix的元素的结尾添加content中的内容    
  16. //转移字符“ \ ”，Mac IE浏览器会忽略掉这段Hack，Windows IE不会  


以下是详细解释

清除浮动的原理 ，其实 是元素留出足够多的 垂直外边距 给浮动的元素。


复制代码
代码如下:

<div >
<div style="float:left"></div>
</div>

这个效果 是 外层div不会包含内层div。因为浮动的元素 脱离了原始文档流。
以上面这个为例一般而言 ，有三种方式清除浮动
。第一让外层元素也浮动，例如


复制代码
代码如下:

<div style="float:left" >
<div style="float:left"></div>
</div>

然后 再此元素之外 的元素上添加clearboth效果。
第二给外层div的末尾添加一个元素，并利用此元素清楚浮动。
具体用法


复制代码
代码如下:

<div style="clearfix" >
<div style="float:left"></div>
</div>
.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}


.clearfix{display:inline-block}
.clearfix{display:block}
其中后面的两个 是为了兼容其他浏览器设置的。因为after不是所有浏览器都支持的。
第三利用 overflow属性


复制代码
代码如下:

<div style="overflow:hidden" >
<div style="float:left"></div>
</div>


关于clearfix:after的实际应用可以参考这篇文章

上一篇：chrome表单自动填充导致input文本框背景变成偏黄色 下一篇：.clear 万能清除浮动(clearfix:after)

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by