css清除浮动

最新推荐文章于 2025-05-13 15:09:04 发布

「已注销」

最新推荐文章于 2025-05-13 15:09:04 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2306318/blog/856880

本文介绍了一种使用CSS伪元素:after来清除浮动的方法。该方法通过在元素内部插入一个不可见的块级元素，从而达到清除浮动的效果，适用于FF、Chrome、Opera及IE8等浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父亲）

先说原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

转载于:https://my.oschina.net/u/2306318/blog/856880