CSS学习(一):清除浮动

CSS中float属性一开始是用来实现文字围绕图片的效果,后来慢慢被用来实现多栏布局,float属性是实现多栏布局的常用实现,因为它对浏览器的兼容性好。如今,随着CSS3的支持,我们有更好的解决方案来实现多栏布局,比如flexbox。了解flexbox的更多知识,推荐阅读阮老师的文章Flex 布局教程:语法篇

为什么要清除

在CSS中,一共有三种定位机制:普通流(normal flow)、浮动(float)和绝对定位(absolute positioning)。HTML文档元素一般就是普通流,当我们对某一个元素使用float属性后,它就脱离了普通流,定位方式变成了浮动,当元素浮动之后,不会影响到块级元素的布局而只会影响行内元素(比如文本)的排列。文档中的普通流就会表现得如同浮动元素不存在一样,当浮动元素高度超出包含元素的时候,就会出现包含元素不会自动伸高来闭合浮动元素,浮动元素无法撑起包含元素,也就是“高度塌陷”现象。高度塌陷对布局来讲是致命的,我们才不写bug,为了修复,我们就需要清除浮动,把浮动元素给闭合了,不影响其他元素的布局。

清除浮动

父元素使用overflow: auto

这是在现代浏览器中最简单清除浮动的方式,overflow属性真正用途是用来指定当内容溢出其包含元素时的处理方式,它还有一个作用,可以迫使父元素包含浮动的子元素。使用overflow属性的值hidden也可以用来清除浮动,但是,它会剪切超出包含元素的部分。

使用::after伪元素

1
2
3
4
5
.clearfix::after {
content: "";
display: block;
clear: both;
}

使用::after伪元素添加了一个非浮动元素,使用clear属性来清除浮动,并且这个非浮动元素是不显示的,不影响布局。使用方法的话,只需要在需要清除浮动的元素中添加这个类名clearfix

父元素同时浮动

如题,同时浮动父元素,父元素浮动后,不管其子元素是否浮动,它都会紧紧地包围住其子元素。其原理是因为浮动的特性,自己可以试试看,显示边框,元素浮动后,它会收缩变得紧凑,紧紧包裹子元素。

其他方法

清除浮动还有下面的一些方法,不过它仅仅是可以做到清除浮动,不够理想,都有或多或少的缺陷,比如破坏HTML的语义性。

  • 在浮动元素末尾添加一个空的标签例如<div style="clear:both"></div>
  • 使用 br标签<br clear="all" />

参考资料

Copyright © 2021 DukeLuo Blog

Powered by Hexo • Theme Candelas