clearfix(清除浮动)

浮动的概念:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动的影响:1.浮动会导致父元素高度坍塌。父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果必然是父元素的高度为0,这也就导致了父元素高度塌陷问题。浮动脱离文档流,这个问题会对整个页面布局带来很大影响,如何解决高度坍塌问题,我们需要清除浮动。

方法    :after伪元素

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素(Blockelement)    清理浮动。

原理:通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点''.'',并且设置clear属性清除浮动。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、浮动的概念 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的...
    WEBING阅读 890评论 0 0
  • 每当使用float: left/right时,在大部分情况下都将不可避免地需要清除浮动造成的影响。对于清除一般的浮...
    阿尔卑斯的隆冬阅读 3,529评论 0 2
  • 原文地址:浮动与清除浮动 浮动 浮动的概念 浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素...
    薛普定朗谔克阅读 903评论 3 14
  • 首先,我们来解释一下为什么要使用 clearfix(清除浮动)。通常我们在写html+css的时候,如果一个父级元...
    Wenliang阅读 53,321评论 2 25
  • 一、浮动的本质 浮动的核心只有一句话:浮动元素会脱离标准文档流向左/向右浮动,直到碰到父元素或者另一个浮动元素。 ...
    lifeline张阅读 386评论 0 0

友情链接更多精彩内容