面试题准备（二十二）：浮动 float

概述

浮动的作用是使元素站队
浮动元素产生浮动流
含有浮动流的元素，会被块级元素忽略
浮动元素可被 BFC，行内元素观察到

float: left;
float: right;

几个概念

1. 常规流 — 页面正常从上到下，从左到右排列的元素流
2. 脱离常规流 — 绝对定位 absolute、固定定位 fixed 有固定的位置，脱离了常规流
3. 包含块 — 一个元素最近的父级块级元素为其包含块

清除浮动

1. 使用伪元素 + clear: both;
2. 触发 BFC

应用

测试

1. 红色浮动元素忽略了紫色块元素，上移并遮住紫色块元素
2. 绿色浮动元素被行内元素观察到，包裹住了绿色元素
3. 浮动会形成 BFC 撑开了外部的父盒子元素

首字下沉

.content::first-letter {
	float: left;
	padding: 0 5px;
	font-size: 32px;
	font-weight: 700;
	color: #09f;
}

• 使用伪元素使得首字母浮动，这样剩余字母就能环绕首字母

两列布局