float浮动带来的影响以及两种解决方法

float浮动

CSS 中的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，往往是用于图像，但它在布局时一样非常有用。
但是在布局是会出现一些影响如下图：

未使用float浮动

使用float浮动

这里可以发现一个问题，使用float浮动后子元素虽然实现了水平方向的浮动，但是父元素的高度却塌陷了。

解决方法

一、在父元素的样式中加入overflow：hidden属性。目的是父元素包住这个脱离了文档流的浮动元素。

"overflow:hidden"可以溢出隐藏，即当内容元素的高度大于其包含块的高度时，设置该属性即可把内容区域超出来的部分隐藏，使内容区域完全包含在该包含块中。
"overflow:hidden"还有另外一个特殊的用途清除包含块内子元素的浮动。这里涉及到BFC布局规则。详情请见BFC规则及应用场景

二、采用用flex弹性布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。（Flex 布局会成为开发者首选布局。）

flex 布局属性

点击进入菜鸟教程——Flex 布局语法教程
点击进入前端布局神器display:flex