概述
浮动的作用是使元素站队
浮动元素产生浮动流
含有浮动流的元素,会被块级元素忽略
浮动元素可被 BFC,行内元素观察到
float: left;
float: right;
几个概念
- 常规流 — 页面正常从上到下,从左到右排列的元素流
- 脱离常规流 — 绝对定位 absolute、固定定位 fixed 有固定的位置,脱离了常规流
- 包含块 — 一个元素最近的父级块级元素为其包含块
清除浮动
- 使用伪元素 + clear: both;
- 触发 BFC
应用
测试
- 红色浮动元素忽略了紫色块元素,上移并遮住紫色块元素
- 绿色浮动元素被行内元素观察到,包裹住了绿色元素
- 浮动会形成 BFC 撑开了外部的父盒子元素
首字下沉
.content::first-letter {
float: left;
padding: 0 5px;
font-size: 32px;
font-weight: 700;
color: #09f;
}
- 使用伪元素使得首字母浮动,这样剩余字母就能环绕首字母
两列布局