跳到主要内容

float 布局使元素脱离文档流，向左/右浮动。常用于早期的多列布局。

一、 浮动​

最初，引入 float 属性是为了让页面实现简单的布局，包括让一列文本中浮动一个图像、文字环绕。

浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列。但是在现代网页技术中有更好的布局技术，使得浮动技术被看作是传统布局。

二、 清除浮动​

而当所有的子元素都脱离了文档流之后，就会造成父元素的高度坍塌（子元素浮动后，父元素无法感知高度）。

所以就需要使用

  • clear: both：需要使用额外的标签
  • overflow: hidden：触发 BFC
  • clearfix： 伪元素法（推荐写法），性能较触发 BFC 好
  • display: flow-root：比较现代的方法，是现代版本的 BFC

1. 使用 clear​

clear 接受以下值：

  • left：停止任何活动的左浮动
  • right：停止任何活动的右浮动
  • both：定制任何活动的左右浮动
.clear-both {
  clear: both;
}

2. clearfix 小技巧​

先向包含浮动内容和其自身的盒子后面插入一些生成的内容，然后将生成的内容清除浮动。

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}

3. 使用 overflow​

使用将包裹元素的 overflow 设置成除 visible 外的其它值。可以创建块格式化上下文（BFC），但是可能会出现抹蜜名其妙的滚动条或是裁剪阴影。

.out-container {
  overflow: auto;
}

4. 现代的 BFC 构建器​

.new-bfc {
  display: flow-root;
}