浮动 及清除浮动

2023-12-14 05:03:30

一、什么是浮动?

1.定义

浮动(float)是一种CSS属性,用于控制元素在页面上的布局位置。当元素设置为浮动时,它会脱离正常的文档流,并向左或向右移动,直到遇到其父元素或其他浮动元素的边缘为止。

2.作用

浮动元素通常用于创建多列布局,使元素能够在文本或其他内容周围浮动。

常用于图片,可以实现文字环绕图片

浮动元素会影响其他元素的布局,尤其是当它们位于浮动元素之后时,可能会导致其他元素紧跟其后或覆盖其内容。

3.属性设置

浮动元素可以使用CSS的float属性来设置,可以将其值设置为left(向左浮动)或right(向右浮动),也可以设置为none(取消浮动)。还可以使用clear属性来控制元素如何与浮动元素互动,在元素前面插入一个空的元素以清除浮动效果。

4.特点

浮动的特点是脱离文档流,可能会造成父元素外边距塌陷。

二、清除浮动的方法

清除浮动是为了解决浮动元素造成的父元素高度塌陷的问题。

1、使用clearfix类:

在父元素上添加一个clearfix类,可以通过给clearfix类设置以下样式来清除浮动:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

原理:在这个方法中,我们在容器内添加一个空元素,并使用 CSS 的 :after 伪类来为其添加一个空内容。然后,我们设置 display: block;clear: both;,以清除浮动。?

2、使用overflow属性:

在父元素上添加overflow属性,并设置值为hidden、auto或scroll,可以触发BFC(块级格式化上下文),从而清除浮动:

.parent {
  overflow: hidden;
}

注意:使用 overflow 属性清除浮动可能会影响容器的滚动条。

使用overflow属性不会新增标签,但是如果父级元素有定位元素超出父级,超出部分会隐藏,在不涉及父级元素有超出内容的情况,overflow:hidden比较常用。

原理:我们通过设置容器的 overflow 属性为 hidden,触发了容器的 BFC(块级格式化上下文),从而清除了内部的浮动元素。

3、使用伪元素清除浮动:

在父元素的最后一个子元素后添加一个伪元素,通过清除浮动来解决父元素高度塌陷的问题:

.parent::after {
  content: "";
  display: table;
  clear: both;
}

注意:伪元素清除浮动 不会新增标签,不会有其他影响。?

4、使用空div清除浮动:

在浮动元素的父容器内部添加一个空的div,并给它设置clear属性:

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

注意:使用空元素清除浮动需要添加额外的 HTML 元素。

清除浮动的语法加在新增标签上,由于新增标签会造成不必要的渲染,所以这种方法目前不建议使用。

5、使用Flexbox布局:

将浮动元素的父容器设置为display: flex,可以自动清除浮动的影响:

.parent {
    display: flex;
}

文章来源:https://blog.csdn.net/weixin_69232086/article/details/134980065
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。