现代CSS清除浮动

2024-09-05 12:35:24

清除浮动

排除远古时代的hack解决方案，比如那些要兼容IE6~8的方法。其实总结起来，大致有三种方法：

overflow

原理解析：块级格式上下文规定了页面必须自动包含突出的浮动元素！

而overflow属性值不是visible的元素就会建立块级格式上下文，所以设置overflow:hidden和auto都是可以清除浮动的。

例子：给浮动元素的父元素设置overflow。

::after伪元素

使用伪元素在浮动元素的父元素的末尾添加一个::after伪元素，使用特定的样式进行清除浮动：

例子：

.float-parent::after {

 content: "";

 display: block;

 clear: both;

}

末尾添加无意义标签

这个原理跟伪元素一样，只是为了兼容不支持伪元素的浏览器，现在一般不再使用了。

例子：

<br/ style="clear: both;">

最新文章

热门文章