浮动与清除

1. float 属性

img {
  float: left;
  margin-right: 1rem;
}

浮动特性：脱离文档流但不脱离文本流；尽量靠左/右排列。

2. 清除浮动

父元素高度塌陷问题

/* 方式1：clearfix */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* 方式2：BFC */
.container {
  overflow: hidden;
}

/* 方式3：flow-root（推荐） */
.container {
  display: flow-root;
}

3. 现代替代方案

/*  旧方式 */
.sidebar {
  float: left;
  width: 25%;
}

/*  新方式 */
.layout {
  display: flex;
}
.sidebar {
  width: 25%;
}

浮动仍适用于：文字环绕图片。