来啊！浮动

睡前思考...人生苦短，用心生活。成功不是一天两天就能成的，都是来自不倦的努力与奔跑；幸福不是平白施舍与你的，而是来自于自己的奋斗和坚持，是要靠自己争取的。不要活在自己的梦幻中，要看清现实，摆正态度，勇于面对现实，美好与瑕疵才是人生最美的画卷。

在多多老大的大力鼓舞之下↓有了今天的第一篇关于前端学习的每日一更。

最近忙成狗浸泡式的学习 的确非常有效 天天念叨浮动各种特征 性质 还有使用，相信很快会得心应手。今天记录下来以便多年以后查阅回顾，也分享给感兴趣的你。

❤浮动的特性

1.使块元素在一行显示

2.使内联元素支持宽高

3.不设置宽高的时候宽度由内容撑开

4.换行不被解析

5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止

6.阻止margin叠压的问题

浮动既有天使一面，也要魔鬼一面。

为了阻止浮动带来的破坏性，高度塌陷，最近学到以下几种常见解决问题的方法：

1.父级div定义 height

缺点：不利于维护

在内容不确定高度时无法使用

2.使用inline-block

缺点：会产生空间空隙

无法使用margin左右居中

3.加空标签

缺点：必须是内联元素

但凡使用到浮动的时候，都需要添加空标签

4.以浮制浮

缺点：所有浮动元素的父级都要加浮动。

最终，加到HTML上就无法继续清除浮动

5.在浮动元素后面增加<br/>标签

        <br/>标签有自带的清除浮动属性

缺点：不符合W3C规范「即行为，结构，样式三者分离规范」

6.父级div定义 伪类:after

推荐使用指数：※五颗星※

更改一个可改动多个浮动