浮动和清除浮动

浮动

为什么需要浮动？

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

比如:

• 让多个 块级元素（**div）**排成一行显示
• 让两个 块级元素 分别显示在 左右两边

结论：有很多布局，标准流（自上而下）无法完成

解决办法：有很多，其中，浮动 就是一种常见方式

浮动作用：让多个块级元素一行内显示

什么是浮动?

作用：让 元素 脱离标准流，漂浮 到 标准流上面；并能设置同行显示。

语法：

选择器{
	float:属性值;
}

属性值：

浮动特点:

元素浮动后，会有3个比较重要的特点

浮动元素 会 脱离标准流(脱标)

设置 float 属性后，元素会有两个表现：

1. 离开标准流（脱标），移动到指定的位置
2. 浮动的元素不再拥有原来的位置，位置被 标准流 后面的元素 前移占据
3. 文字不识别 元素标签的浮动，所以会围绕浮动元素的"空出位置"进行布局

浮动元素 会 一行内显示并且元素顶部对齐

如果多个元素都设置了浮动：

1. 它们会按照属性值 在一行内显示
2. 多个浮动元素会保持顶端对齐

两个细节：

• 浮动方向相同的元素紧挨在一起（无缝隙）
• 如果父级宽度装不下这些浮动的盒子， 多出的盒子会 换行

浮动元素 会 具有行内块元素的特性（成行显示，可设置高宽）

任何类型的元素都可以浮动，浮动后都具有 行内块元素 特性：

• 成行显示
• 宽高由内容决定
• 宽高可设置

清除浮动

原因: 元素浮动后，会脱标

三个问题场景：

1. 浮动后，标准流后的元素不补位
2. 父元素宽度不够时，内部的浮动子元素高度不一，可能卡住换行的浮动子元素
3. 父元素不设置高度，一旦子元素浮动，父元素高度将无法撑住

解决办法: 清除浮动

1. 使用 clear 属性，解决 前两个场景 问题
2. 使用 overflow 属性，解决 父盒子 丢失高度问题

清除浮动方法1

语法：

选择器{
	clear: 属性值;
}

本质：清除浮动元素造成的影响，让其他元素认为浮动元素没有浮起来

拜拜~~~~~~~~~~~~~~~~