前端知识日常总结系列（三）-----浮动理解

浮动float

可选值

• none 默认值，元素不浮动，就在文档流中
• left 元素向页面的左侧浮动
• right 元素向页面的右侧浮动

浮动特点

• 元素设置浮动以后，会完全脱离文档流，并向页面的左上或右上浮动。直到遇到父元素的边框或其他的父元素时则停止浮动。
• 如果浮动元素上边是一个没有浮动的块元素，元素不会超过该块元素。
• 浮动元素的浮动位置不能超过他上边浮动的兄弟元素，最多一边齐
  浮动元素不会覆盖文字，文字会围绕在浮动元素的周围，所以可以通过浮动来实现文字环绕图片的效果。

浮动以后元素会完全脱离文档流，脱离文档流以后元素会具有如下特点:

• 块元素不独占一行
• 块元素的宽度和高度都被内容撑开
• 元素不在文档流占用位置
• 内联元素会变成块元素

高度塌陷

在文档流中元素的高度默认被子元素撑开，当子元素浮动时，子元素会脱离文档流，此时将不能撑起父元素的高度，会导致父元素的高度塌陷。父元素高度塌陷会导致其他元素的位置上移，导致页面的布局混乱。

可以通过开启元素的BFC来处理高度塌陷的问题

BFC叫做Block Formatting Context.它是一个隐含属性，默认情况是关闭，当开启以后元素会具有如下的特性：

• 父元素的垂直外边距不会和子元素重叠
• 开启BFC的元素不会被浮动元素覆盖
• 父元素可以包含浮动的子元素 **

开启BFC的方式

• 设置元素浮动
• 设置元素绝对定位
• 设置元素为inline-block
• 将元素的overflow设置为一个非默认值

一般我们采取副作用比较小的方式:overflow:hidden;