详解浮动
1. 浮动元素处于什么样的流?
《CSS 权威指南》中说,浮动元素同时处于(常规)流内和流外
- 如何理解?
- 浮动元素不影响块级元素的布局(换句话说就是块级元素会当浮动元素不存在)
- 浮动元素会影响行内元素的布局,从而间接影响块级元素的布局
2. 浮动与定位不能一起用
- 如果一起使用,浮动失效、定位生效
- 但是浮动与相对定位可以一起使用
3. 浮动元素的摆放方式
- 尽量靠上
- 尽量靠左
- 不能超过包含块
- 不能超过所在行的最高点
- 不能超过它前面的浮动元素的最高点
- 行内元素绕着浮动元素摆放
- 行内元素会出现在左浮动元素的右边及右浮动元素的左边
- 左浮动元素的左边及右浮动元素的右边不会摆放浮动元素
4. 浮动的清除
- 浮动的清除指块框下移直到某一边(两边)没有浮动元素为止
- clear 只用于在常规流里面的块级元素
clear: none | left | right | both;
- left 指从右向左看
5. 浮动的闭合
-
解决方式
- table
- display:table | table-cell
- BFC
- overflow:hidden
- display:flow-root
- 包含块自身浮动
div { float: left; }
- 伪元素
.clearfix::after { content: ''; display: block; clear: both; }
- 行内元素
a { display: block; clear: both; }
- table