天天观热点：CSS 清除浮动

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

2023-02-02 18:56:09 来源：博客园

在元素设置浮动（float）后，该元素就会脱离文档流，并且向左或向右浮动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

(资料图片)

一、浮动元素对布局的影响

1.1、浮动元素造成父元素的高度塌陷：

原来的父元素高度是内部元素撑开的，但是当内部元素浮动后，脱离文档流浮动起来，那父元素的高度就坍塌，变为高度 0px。

上述代码中 container 元素的高度将会是 0px。

1.2、浮动元素对邻近非浮动元素造成影响：

上述代码中 box1 的位置受到前面元素浮动的影响，而且不管 box1 是在 container 里面还是外面都会受到影响。

二、清除浮动（解决浮动元素影响邻近非浮动元素问题）

CSS 清除浮动是指在使用浮动布局时，解决浮动元素对非浮动元素的影响的问题。

当元素设置为浮动时，它会从文档流中“漂浮”出来，不再占据原来的空间，导致后面的元素不能正确地换行显示。为了解决这个问题，需要使用清除浮动的方法。

常见的清除浮动方法有以下几种：

1、在浮动元素后添加一个空的容器，并给该容器设置 clear 属性：

  ...
  ...

2、给父元素设置 overflow 属性：

...

3、使用伪元素：

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

将以上代码添加到需要清除浮动的元素的 CSS 中，并在 HTML 中将该元素的 class 设置为 clearfix。这样，就可以通过使用伪元素清除浮动了。

4、使用 CSS flex 布局：

在使用 CSS flex 布局时，父元素默认会包含所有的子元素，因此不需要进行清除浮动。

  ...
  ...

5、使用 CSS grid 布局：

在使用 CSS grid 布局时，父元素默认会包含所有的子元素，因此不需要进行清除浮动。

  ...
  ...

上是 CSS 清除浮动的常见方法，需要根据具体的使用场景和需求来选择最适合的方法。

三、解决浮动元素造成父元素高度塌陷问题

在开发过程中，有时需要解决浮动元素对父元素高度的影响，这时也可以使用以下方法解决：

1、使用绝对定位：

通过将浮动元素设置为绝对定位，可以避免浮动元素对父元素高度的影响。

  ...
  ...

2、使用 table 布局：

通过将父元素设置为表格布局，可以避免浮动元素对父元素高度的影响。

  ...
  ...

这些方法可以帮助解决浮动元素对父元素高度的影响问题，但是需要根据具体的使用场景和需求来选择最适合的方法。