浮动

1、为什么要使用浮动

浮动主要用在水平布局，比如想实现横排摆放2个div，发现不管是inline还是inline-block，都会有一个白的的间隙，因为换行会被解析，同时解析出来的间隔不可控，而不换行的话，代码可读性就会让人想砸电脑，所以引入了浮动的概念

2、浮动的定义

使元素脱离文档流、按照指定的方向发生移动，遇到父级边界或者相邻的浮动元素停下来

任何标签都有浮动属性，值有4个，none-不使用浮动，left-向左浮动，right-向右浮动，inherit-继承父级

3、使用浮动的效果以及优缺点

效果：

1、块元素在一行显示

2、行元素支持设置宽高

3、块元素不设宽度的时候，内容撑开宽度

4、脱离文档流，提升层级半层，位置提升而内容不提升

5、浮动元素支持所有的css命令

优点：

完美实现水平布局以及行元素的相关设置

缺点：

脱离文档流，提升层级半层，位置提升而内容不提升，对布局造成干扰，需要清除浮动带来的影响

4、清除浮动带来的影响

如果想实现这样的布局

按理来说，这样的代码就行

但是这样代码的结果是

div层级提升半层（位置提升而内容不提升），所以绿色的p标签会上来，因为它认为上面的div浮起来了把位置让出来了，而内容“我爱开发”，它会识别到“1”、“2”两个字，所以“我爱开发”就会被“挤”到后边。有问题就会有解决办法而且办法总比问题多，两大种方法，添加父级或者添加平级

添加父级：

添加父级又有两种方法

a）给父级设置高度，但是有诸多不便利

看起来是好了，但是打开控制台会发现：

首先是需要考虑到子债父偿的问题，参考上一篇文章--盒模型

然后就是当内部子级需要调整或者增删子级，需要调整父级，父级高度设置不合理的话，会有这种情况，还得慢慢调整，太繁琐，不利于维护

所以我们常用第二种方式：

b）为父级设overflow属性，值为hidden(隐藏超出的部分)或者scroll(滚动)，一般用hidden，因为同样能在其他效果上起作用

完美解决

添加平级：

新添加的元素不给宽高内容以及任何样式，不影响布局，也能完美保留浮动效果并清除浮动带来的影响

通常是把浮动的元素单独包裹起来,为父级设overflow属性，值为hidden，这样层级分明并且正好能解决子债父偿问题，简单直接！