跳到主要内容

Floats

浮动

浮动会让元素脱离正常文档流。

浮动起来​

float

清除浮动​

clear 属性接受下列值：

  • left：停止任何活动的左浮动
  • right：停止任何活动的右浮动
  • both：停止任何活动的左右浮动

使背景覆盖到浮动的盒子​

display: flow-root​

up-to-date最现代的解决方法。

display: flow-root它可以无需小技巧来创建块级格式化上下文（BFC），在使用上没有副作用。

使用 overflow​

将包裹元素的 overflow 属性设置为除 visible 外的其他值。这个也设置了块级格式化文本上下文。

比如：overflow: auto

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

大部分情况下这种小技巧都可以奏效，但是可能会出现莫名其妙的滚动条或裁剪阴影，这是使用 overflow 带来的一些副作用。

clearfix 小技巧​

其过程为：先向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}
<div class="wrapper">
  <div class="float">Float</div>
  <p>This sentence appears next to the float.</p>
</div>