一、浮动概述：

       通过设置浮动可以让一个元素向其父元素的左侧或者右侧移动，使用float属性来设置元素浮动。可以通过浮动来设置一些水平方向的布局。

属性值：

编辑

注意：

       元素设置浮动之后，水平布局遍不再需要强制满足和父元素宽高等式！！！元素设置浮动后，元素会完全从文档流中脱离，不再占用文档流的位置。

浮动特点：

• 浮动元素完全脱离文档流，不再占据文档流中的位置
• 设置浮动以后元素会向父元素的左侧或者右侧移动
• 浮动元素默认不会从父元素中移出
• 浮动元素向左或者向右移动时，不会超过它前边的其它浮动元素
• 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
• 浮动元素不会超过它上边的浮动的兄弟元素，最多和他一样高
• 浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片效果

脱离文档流特点：

块元素：

• 款元素不再独占一行
• 脱离文档流之后，块元素的宽度和高度默认被内容撑开

行内元素：

• 行内元素脱离文档流以后会变成块元素，特点和块元素一样

脱离文档流以后，不需要再区分块和行内元素了！

二、高度塌陷&BFC：

1.高度塌陷：

       在浮动布局中，父元素的高度默认是子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素会从文档流中脱离，将无法撑起父元素的高度，导致父元素高度丢失。父元素高度丢失之后，其下的元素会自动上移，导致布局混乱。

2.Block Formatting Context：

       BFC（Block Formatting Context）块级格式化环境，BFC是一个CSS中的一个隐含属性，可以为一个元素开启BFC。开启BFC该元素会变成一个独立的布局区域。

2.1 BFC特点：

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

2.2 开启BFC方式：

• 设置元素的浮动
• 将元素设置为行内块元素
• 将元素的overflow设置为一个非visable的值，开启BFC，使得其可以包含浮动元素

三、clear属性：

       如果我们不希望某个元素因为其它元素浮动影响而改变位置，可以通过设置clear属性来清除浮动元素对当前元素所产生的影响。

属性值：

编辑