CSS清除浮动的方法及原理

Posted 2021-06-20 ~往无前

为什么清除浮动

1.浮动的缺点：

浮动虽然可以便于页面布局，但同时会产生一些问题，也就是我们常说的“副作用”。一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷，下面对这两个问题展开说明。

1.1对兄弟元素的影响

分为以下两种情况：

1. 若兄弟元素是块级元素且设置了高度的：上级元素设置了浮动，从而脱离了标准文档流，所以此时该兄弟元素只能补位上去，从而出现被上级元素覆盖的情况出现。如果块级元素中有文字，文字或被脱下来，而不会被覆盖。
2. 若兄弟元素是行内元素或者是未设置高度及宽度的块级元素：此时该元素尽可能的围绕浮动元素，出现和浮动元素并排的情况。

1.2对父元素的影响

浮动的元素脱离了标准文档流，这样使得包含它的父元素并不会因为这个浮动元素的存在而自动的撑开高度，这样就会造成高度塌陷。

2.清除浮动的常见方法

方法1:在浮动元素的末尾加一个空的div元素，添加其样式clear:both。当然还有其他的属性值，比如left，right,none。

添加之后我们发现父元素的高度还原了，那这里面的原理是什么呢？
原理：当我们设置一个空的div时，且不设置高度宽度时，它默认是上面1.1中所提到的第二种情况，围绕在浮动元素周围。但是clear属性的作用就是它让div元素无视对浮动元素的围绕，重新开启新的一行。因为父级元素的高度取决于此时并没有设置浮动的div元素，div换行了，父级元素想要包裹它只能撑开自己的高度。

方法2：在浮动元素的末尾添加一个伪类元素，在设置clear属性，这其实就是相当于方法1中的创建一个空的div元素。

方法3.父元素设置overflow的值为hidden或auto,可以闭合浮动.其次必须定义width或zoom：1,同时不能定义height.

在添加了了overflow属性后，浮动元素又回到了容器层，把容器的高度给撑开了，达到了清除浮动的效果。这个方法相对前者更加的方便，只是overflow并不是闭合浮动而设计的。
当设置为overflow：hidden时：当容器包含会超出元素边界的子元素时，可能会覆盖掉有用的子元素，比如说给子元素设置了position，就会导致这样的情况发生。
当设置为overflow:auto时：容器中包含的子元素超出元素的边界时，就会产生多余的滚动条。

方法4.既然父元素的高度无法由子元素撑开，那就直接给父元设置高度值。

缺点：只适合高度的固定的布局，要给出精确地高度，如果 高度和父级div不一样时，会产生问题。