网络常用完整代码:
CSS代码将内容复制到剪贴板
. clearfix:before, clearfix:after{
内容: ';
显示:表;
}
. clearfix:after{
clear:both;
Overflow :隐藏;
}
. clearfix{
*孝顺薯片:1;
}
如果外部有div容器,并且内部设置了浮动样式,则外部容器div无法展开,因为内部没有clear。
解决方法:
CSS代码:
CSS代码将内容复制到剪贴板
. clearfix:after{
内容: '.';
显示: block;
高清:0;
clear:both;
可视:隐藏;
}
. clearfix { display :在线- block; }
/*HidesfromIE-mac*/
*html.clearfix{height:1%; }
. clearfix{display:block; }
/*EndhidefromIE-mac*/
//clearfix的CSS使用了一个名为after的虚拟对象
将内容添加到要应用clearfix的元素末尾
如果移动//字符“”,MacIE浏览器将忽略此Hack,但WindowsIE不会
以下详细说明。
首先消除浮动的原理实际上是元素与浮动元素有足够的垂直外部距离。
复制代码就是:
这个效果是外层div不包含内层div。 因为浮动元素远离了原始文档的流程。
想想上面的例子吧。 一般来说,有三种方法可以消除浮动。 第一,外部元素也要浮动。 示例:
复制代码就是:
然后,将clear:both效果添加到此元素以外的元素中。
第二,将元素添加到外部div的末尾,然后使用该元素使其明显浮动。
具体使用方法:
复制代码就是:
. clearfix:atfer{
内容: '.';
显示: block;
可视:隐藏;
高清:0;
clear:both;
}
. clearfix { display : inline-block }
. clearfix { display :块}
其中两个是为了与其他浏览器兼容而设置的。 因为after并不是所有的浏览器都支持。
第三,利用溢出属性
复制代码就是:
关于clearfix:after的实际应用,请参考本文。 https://www.jb51.net/CSS/80068.html