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