睡前思考...人生苦短，用心生活。成功不是一天两天就能成的，都是来自不倦的努力与奔跑；幸福不是平白施舍与你的，而是来自于自己的奋斗和坚持，是要靠自己争取的。不要活在自己的梦幻中，要看清现实，摆正态度，勇于面对现实，美好与瑕疵才是人生最美的画卷。
在多多老大的大力鼓舞之下↓有了今天的第一篇关于前端学习的每日一更。
最近忙成狗浸泡式的学习 的确非常有效 天天念叨浮动各种特征 性质 还有使用，相信很快会得心应手。今天记录下来以便多年以后查阅回顾，也分享给感兴趣的你。
❤浮动的特性
1.使块元素在一行显示
2.使内联元素支持宽高
3.不设置宽高的时候宽度由内容撑开
4.换行不被解析
5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止
6.阻止margin叠压的问题
浮动既有天使一面，也要魔鬼一面。
为了阻止浮动带来的破坏性，高度塌陷，最近学到以下几种常见解决问题的方法：
1.父级div定义 height
缺点：不利于维护
在内容不确定高度时无法使用
2.使用inline-block
缺点：会产生空间空隙
无法使用margin左右居中
3.加空标签
缺点：必须是内联元素
但凡使用到浮动的时候，都需要添加空标签
4.以浮制浮
缺点：所有浮动元素的父级都要加浮动。
最终，加到HTML上就无法继续清除浮动
5.在浮动元素后面增加<br/>标签
<br/>标签有自带的清除浮动属性
缺点：不符合W3C规范「即行为，结构，样式三者分离规范」
6.父级div定义 伪类:after
推荐使用指数：※五颗星※
更改一个可改动多个浮动
网友评论