CSS3浮动的本质、如何设置浮动、清除浮动的几种方法

浮动

1、传统网页布局的三种方式

本质：用css摆放盒子。将盒子放到相应的位置。

• 普通流（标准流/文档流)
• 浮动
• 定位

2、标准流

3、为什么选择浮动？

浮动最典型的应用：可以让多个块级元素进行一行排列

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

4、浮动

浮动原理：

float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘碰到包含块或另一个浮动框的边缘。

• float：left:左浮动

  

• float：right右浮动

5、浮动特性

元素加了浮动之后，就会出现很多特性

5.1 浮动的元素会脱标

1. 浮动的盒子不再保留原先的位置

2. 浮动的元素不能压着标准流里面的文字和图片

3. 脱离标准普通流的控制移动到指定位置，俗称脱标

5.2 浮动的元素会在一行显示

​ 浮动的元素会在一行显示或者顶端对齐

​ 注意：

​ 浮动的元素是在一行内紧贴在一起显示，如果一行内的浮动元素的宽度大于父盒子的宽度，那么后面的盒子就会另起一行。

​ 解决方法：

​ 调整父盒子的宽度

5.3 浮动的元素具有行内块元素特性

• 添加浮动，宽度是根据内容的多少来决定
• 浮动的盒子之间没有缝隙

5.4 浮动元素经常搭配标准流的父盒子

​ 为了约束浮动元素的位置，一般采取的措施是：

​ 先用标准流父盒子排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

5.5 浮动布局的注意点

1. 浮动和标准流的父盒子搭配

   先用标准流的父盒子进行排列上下位置，在用内部子元素采取浮动排列左右位置

2. 任何一个盒子浮动，理论上其余的兄弟元素也会浮动

   浮动盒子只会影响后面的标准流，不会影响前面的标准流

6、为什么清除浮动？

​ 有些盒子不需要高度，例如某商城的商品展示上新的内容有时多有时少，这样就不需要高度…

​ 这样该怎么办呢？

​ 那么就需要子盒子撑开父盒子的高度。

​ 那么父盒子的高度呢？

​ 如果有了浮动，那么父盒子的高度则自动变成0，随后下面的盒子就会往上移动。

​ 这样，就需要清除浮动，让下面的标准流进行正常的显示。

7、清除浮动的四种方法

1. 清除浮动的本质：清除浮动元素脱离标准流造成的影响
2. 策略：闭合浮动

7.1 额外标签法，clear：both；

​ 隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加 清 除浮动样式.

​ 注：在后面添加的元素必须是块级元素。

7.2 给父元素添加overflow：hidden；

​ 优点：代码简单

7.3 给父元素添加伪元素

.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
/* IE6、7 专有 */ 
*zoom: 1;
}

​ 优点：没有增加标签，结构简单

​ 缺点：照顾版本低的浏览器

​ 代表网站：百度、网易、淘宝…

7.4 给父元素添加双伪元素

.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* IE6、7 专有 */ 
*zoom: 1;
}

​ 优点：代码更简单

​ 缺点：照顾版本低的浏览器

​ 代表网站：小米、腾讯…

希望能给大家带来明白的解释~~~有什么小错误的还请大佬们指点。