版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27922023/article/details/81116623
浮动float
可选值
- none 默认值，元素不浮动，就在文档流中
- left 元素向页面的左侧浮动
- right 元素向页面的右侧浮动
浮动特点
- 元素设置浮动以后，会完全脱离文档流，并向页面的左上或右上浮动。直到遇到父元素的边框或其他的父元素时则停止浮动。
- 如果浮动元素上边是一个没有浮动的块元素，元素不会超过该块元素。
- 浮动元素的浮动位置不能超过他上边浮动的兄弟元素，最多一边齐
浮动元素不会覆盖文字，文字会围绕在浮动元素的周围，所以可以通过浮动来实现文字环绕图片的效果。
浮动以后元素会完全脱离文档流，脱离文档流以后元素会具有如下特点:
- 块元素不独占一行
- 块元素的宽度和高度都被内容撑开
- 元素不在文档流占用位置
- 内联元素会变成块元素
高度塌陷
在文档流中元素的高度默认被子元素撑开，当子元素浮动时，子元素会脱离文档流，此时将不能撑起父元素的高度，会导致父元素的高度塌陷。父元素高度塌陷会导致其他元素的位置上移，导致页面的布局混乱。
可以通过开启元素的BFC来处理高度塌陷的问题
BFC叫做Block Formatting Context.它是一个隐含属性，默认情况是关闭，当开启以后元素会具有如下的特性：
- 父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素覆盖
- 父元素可以包含浮动的子元素 **
开启BFC的方式
- 设置元素浮动
- 设置元素绝对定位
- 设置元素为inline-block
- 将元素的overflow设置为一个非默认值
一般我们采取副作用比较小的方式:overflow:hidden;