浮动知识点

1. 为什么需要浮动？

因为在页面布局中，很多情况下需要元素在一行显示，可以把块级元素转为行内块元素。虽然转为行内块元素可以在一行显示,并且可以设置大小（width,hight），但是盒子之间会有空隙，为了解决这个问题，我们可以给需要在一行显示的元素设置浮动。

2.任何元素都可以设置浮动，添加浮动之后会有行内块元素的特性。

3.如果第一个盒子设置左浮动，第二个盒子也设置左浮动，那么第二个盒子就紧挨着第一个盒子的左边，不会有缝隙。

语法：

选择器{

属性：float:

属性值：

none；=为默认值，元素不浮动

left；=元素向左浮动

right；=元素向右浮动

}

2. 浮动的特性（脱标）

1. 脱离标准流/文档流，不再占有原来的位置，等于设置了浮动之后的元素会浮起来，往z轴的方向也就是离我们视线更近了。导致浮动后面的盒子会跑到浮动下面去，为了让后面的盒子正常排列布局，我们则需要清除浮动带来的影响。

3. 清除浮动

1.因为在很多情况下，父盒子的宽度不方便给一个固定的值（为了方便页面后期增加更多的内容），但是子盒子浮动了不占位，导致父盒子的宽度为0，就会影响下面的盒子。

2.本质：清除浮动就是清除浮动元素造成的影响，当我们清除完浮动之后父级盒子就会自动检测到子盒子的高度，当父级盒子有了高度就不会影响下面的元素了。

3. 语法：

选择器{clean:属性值}

属性值

1. left {不允许左侧有浮动元素(清除左侧浮动的影响)}

2. right {不允许右侧有浮动元素(清除右侧浮动的影响)}

3. both  同时清除左右两侧浮动的影响

1方法：清除浮动——额外标签法（隔墙法）

1. 在最后一个浮动元素的后面添加一个新的标签，用这个标签隔开。

2. 注意：新添加的这个标签必须是块级元素。

2方法： 清除浮动——父元素overflow

1. 如果想要清除浮动，给浮动的父盒子添加overflow-hidden；

注意：overflow 会触发BFC：block formatting context （块级格式化上下文）

3方法：清除浮动——:after伪元素法

:after 也是给父元素添加。

E选择器:after {
        content:" ";

        display:block;

        clear:both;

}

以下就是用浮动让块元素在一行显示

整体分为一个大的box把它们包起来，再里面分两块，左边一块右边一块，右边里面有8小块。