浮动

在网站布局中，应当以 normal flow, flex 和 grid 布局为主。只有在需要特殊样式无法满足时，再考虑 float 布局。

简介

把一个元素“浮动”(float)起来，会改变该元素本身和在正常布局流(normal flow)中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流(normal flow)中移除，这时候其他的周围内容就会在这个被设置浮动(float)的元素周围环绕。

float 属性有四个可能的值:

注意浮动内容仍然遵循盒子模型诸如外边距和边界。

所有列使用宽度百分比会创建一个流式布局(liquid layout)。请尝试调整浏览器窗口的宽度，以便自己查看。需要注意的一件事是，当它们变得非常窄时，列就会变得很糟糕。切换回窄屏幕的单列布局通常是有意义的 (如手机)，使用媒体查询可以实现这一功能。

另一种选择是将宽度设置为一个固定的单位如 rem 或像素，这就是固定宽度布局(fixed-width layout)

有些情况下，浮动元素内容过多会错乱排版。

为了解决这个问题，您需要在页脚清除浮动。

footer {
  clear: both;
}

clear 可以取三个值:

您通常只想设定一个 clear: both 在您想让浮动停止的元素上。在某些情况下，您会想要只取消 left 或 right 引用。

到目前为止，我们的例子是没有应用样式的浮动框——这很容易。当您开始给这些框加上样式时，比如添加背景、外边距、内边距等等，问题就来了。

div,
footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}

有两个方法可以解决问题，最好的方法是给您的 HTML 加上下面的 CSS。

* {
  box-sizing: border-box;
}

box-sizing 通过更改盒模型将宽度取值为 content + padding + border，而不仅是之前的 content。所以当增加内边距或边界的宽度时，不会使盒子更宽——而是会使内容调整得更窄。

我们有另一个问题: 页脚正压在最长列上。但是如果试着清除页脚浮动的同时给出一些顶部外边距 margin-top

footer {
  clear: both;
  margin-top: 4%;
}

您会发现它们不起作用。

浮动元素有以下性质:

为了解决这个问题，我们需要添加新的 <div> 元素，位于在 <footer> 标签的上方:

<div class="clearfix"></div>

如果您没有一个可用的元素来清除您的浮动(比如我们的页脚)，在您想要清除的浮动之后添加一个看不见的“clearfix div”是非常有用的，但是在这里页脚也要用到。接下来我们要做的是，移除页脚样式规则中的 clear: both; 声明，取而代之将其放在 clearfix div 中:

.clearfix {
  clear: both;
}

这个时候页脚现顶部外边距就会生效。

但是这会造成另一个问题: clearfix div 背景、内边距和边界与我们的列和页脚相同

为了解决这个问题，让我们先给每个列块一个类( class )column:

<div class="column">...</div>

之后改变应用盒子样式的规则到这些块和页脚，这样只有列块被样式化:

.column,
footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}