页面布局时为什么会出现浮动？如何清除浮动？

浮动是一种常见的页面布局方式，它可以让元素脱离文档流，并且向左或向右移动，直到它的边缘碰到包含它的元素或者另一个浮动元素的边缘为止。使用浮动可以实现一些流式布局效果，比如多栏布局、图文环绕等。

但是，浮动元素的脱离文档流可能会导致一些问题，比如元素高度塌陷、元素重叠等，这时候需要清除浮动。

清除浮动的方法有多种，最常用的方法是添加一个空 div 元素，并设置 clear 属性。例如：

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

这种方法的原理是在浮动元素下方添加一个清除元素，从而防止浮动元素对后面的元素造成影响。

还有一种方法是在包含浮动元素的父元素上设置 overflow 属性为 auto 或 hidden。例如：

.container {
  overflow: auto;
}

这种方法的原理是让浮动元素的高度被包含在父元素中，从而防止浮动元素对后面的元素造成影响。

除此之外，还可以使用伪元素 ::after 和 ::before 来清除浮动。例如：

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

这种方法的原理是在包含浮动元素的父元素上添加一个伪元素，并设置 clear 属性，从而防止浮动元素对后面的元素造成影响。