【浮动】简单了解一下浮动~

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

浮动

  float：left / right

1、浮动特性

1. 属于浮动流（脱离了标准文档流）
2. 经过浮动的元素变为行内块元素
3. 块级元素看不到浮动元素，行级元素看得到浮动元素
4. 不经过浮动的文本会在剩余空间内自然环绕排列，经过浮动的文本如果剩余空间不够，会自动往下一行排列
5. 浮动元素在父级剩余空间不够，会自动往下一行排列
6. 浮动元素之间没有间隙 浮动元素可以去掉行级元素自带的间隙
7. 浮动换行依赖宽度设置

2、解决浮动塌陷的办法

1、给父元素设置高度，（具有不确定性）
2、块级BFC
3、给父元素末尾添加空div clear:both;
（改变了原有的结构）
4、伪类消除

.clearf::after{
	display:block;
	content:" ";
	clear:both;
}

3、块级BFC

display：inline inline-block
float：left/right
overflow：hidden/auto/scroll
position:absolute

4、代码案例

展现结果：

---