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 条评论
登录 后参与评论

相关文章

来自专栏前端萌媛的成长之路

BFC

1424
来自专栏coding for love

CSS进阶03-定位体系,格式化上下文,常规流

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

461
来自专栏Web项目聚集地

CSS布局解决方案(居中布局)

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局...

832
来自专栏腾讯NEXT学位

CSS中各种布局的背后(*FC)

3435
来自专栏用户3211691的专栏

CSS——可视化格式模型

<div> some inline text <p>more text</p> ...

412
来自专栏进击的君君的前端之路

关于浮动

1254
来自专栏IMWeb前端团队

居中那些事情

居中那点事 最近碰到一些居中的问题需要处理,这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道,让一个元素水平...

18210
来自专栏lgp20151222

脱离文档流两操作,float和position:absolute的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行;

592
来自专栏练小习的专栏

可视化格式模型-浮动

浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型,并不是二维的。元素在页面上的排列,从我们的角度看是...

18610
来自专栏Java后端技术

CSS语法小记

    1.选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,例如h1,img;也可以是定义了特定的id或者class的标签,如...

531

扫码关注云+社区