来啊!浮动

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

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

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

❤浮动的特性

1.使块元素在一行显示

2.使内联元素支持宽高

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

4.换行不被解析

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

6.阻止margin叠压的问题

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

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

1.父级div定义 height

缺点:不利于维护

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

2.使用inline-block

缺点:会产生空间空隙

无法使用margin左右居中

3.加空标签

缺点:必须是内联元素

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

4.以浮制浮

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

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

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

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

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

6.父级div定义 伪类:after

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

更改一个可改动多个浮动

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,302评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,937评论 1 19
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,479评论 0 5
  • 看到这幅画,肉乎乎的小手特别可爱。 想起了自己的宝宝。 一年的时间,我们似乎还和一年前一样,变化不大。然而一个襁褓...
    甘丫头阅读 433评论 0 4
  • 如果说,人生是一次不断选择的旅行,那么当千帆阅尽,最终留下的,就是一片属于自己的,独一无二的风景。 中午一起吃饭的...
    兜兜不缺糖阅读 380评论 5 2

友情链接更多精彩内容