专栏首页前端说吧css笔记 - 张鑫旭css课程笔记

css笔记 - 张鑫旭css课程笔记

https://www.imooc.com/t/197450 float

float的设计初衷/原本作用-是为了实现文字环绕效果 如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了。

浮动的包裹与破坏

  • 包裹
  • 收缩
  • 坚挺
  • 隔绝 - BFC

具有包裹的其他属性:(是不是可以生成块级上下文的其他属性?)

  • display: inline-block、table-cell...
  • position: absolute(近亲)、fixed、sticky
  • overflow: hidden、scroll

破坏 - 容器被破坏 父元素高度塌陷

其他具有破坏属性的属性

  • display: none
  • position: absolute/fixed/sticky

总结 浮动是魔鬼 无宽度 无图片 无浮动

浮动让父元素高度塌陷不是bug而是标准! 浮动的破坏性只是单纯为了实现文字环绕效果而已;

清除浮动 其实是清除浮动带来的影响,浮动还在

基本方法: 1.在浮动元素的父元素底部插入clear:both 浮动元素和外部元素还是会有联系,例如发生margin重叠效果

浮动元素的父元素内部,如果有其他子元素有margin,还是会跑到父元素的外边,导致和父元素其他兄弟元素的margin重叠。

做法:   a. 用html, block水平元素底部插入一个空的div元素即可   b. 用css, after伪元素,   .clearfix:after{}   .clearfix{}

2.使父元素BFC(ie8+)或haslayout(ie6/7) bfc形成一个封闭的结构,保证里边的元素不会对外部发生任何影响,例如浮动带来的影响,也就不会发生margin重叠,

因为bfc所形成的新块,包含内部元素的margin; 具体的区别对比,最清晰的看这个示例:https://www.imooc.com/code/2778

怎么形成BFC? BFC、haslayout通常声明

  • float:left/right;
  • position: absolute/fixed;
  • overflow: hidden/scroll(ie7+)
  • display: inline-block、table-cell(ie8+)
  • width/height/*【zoom:1】/..(ie6/7)

以上,除了zoom:1以外,其他都不能通用,因为让所有元素都float不现实 但是zoom:1只在低版本ie,高版本也不兼容的。

通用清除浮动带来影响的写法:

1 .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;}
2 .clearfix:after{content:'';display:table;clear:both;} //大神推荐写法,与上边任选其一
3 .clearfix{*zoom:1;}

总结

clearfix只能用在包含浮动元素的父级元素上,滥用会有ie低版本的触发haslayout导致的诡异问题

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • BootStrap的一个标准框架的内容解释——来源于bootstrap官网

    xing.org1^
  • JS-DOM2级事件对象跨浏览器处理(已封装)

    xing.org1^
  • JS-DOM2级事件对象跨浏览器处理(已封装)

    以下是测试时的html文件,DOM2级事件-跨浏览器处理.js就是上面的js源码。

    xing.org1^
  • clearfix为什么用display:table,而不用display:block

    但是为嘛用 display:table哪? 我用display:block好像也是显示很正常,也能清除浮动。

    javascript.shop
  • 【达人推荐】玩转数据的互联网大厂高级数据分析师

    今天给大家推荐一个数据分析&挖掘领域的大牛:徐麟,之前在携程、唯品会等互联网公司从事担任高级数据分析师,同时创建了个人公众号数据森麟。

    1480
  • 测试思想-测试总结 测试报告-关于关缺陷统计

    一般测试报告都少不了缺陷统计表,那具体需要统计哪些呢?不同公司规范性不一样,所以要求一般,我这里就例举几个常用的表:

    授客
  • ffmpeg添加水印和滤镜效果

    更多的特效使用: http://www.ffmpeg.org/ffmpeg-filters.html

    曾大稳
  • 漂亮的with,鱼与熊掌可以兼得

    假设要加载磁盘上的一个文件,并以二进制形式读取文件的数据。若要从健壮性的角度考虑,需得考虑两种异常情况: 加载文件失败,例如给定的文件路径并不存在该文件 读取文...

    张逸
  • 伯克利大学副校长一行拜访腾讯

    近日,伯克利加州大学副校长Prof. Graham Fleming、工程院副院长Prof. Connie Chang-Hasnain、机械工程系系主任 Prof...

    腾讯高校合作
  • 小白也能玩转无线安全(一)——硬件&工具入门篇

    小白也能玩转无线安全(一)——硬件&工具入门篇 From ChaMd5安全团队核心成员 sherlly 0x00 写在前面 很久之前就想出一套无线安全系列的文章...

    ChaMd5安全团队

扫码关注云+社区

领取腾讯云代金券