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

相关文章

来自专栏前端杂货铺

清除浮动的原理剖析

常用的清除浮动的几种方法总结下:   1,手动设置一个标签(在浮动元素下方),然后对其设置clear属性     2,给浮动元素设置 :after伪类,创建块元...

3569
来自专栏一“技”之长

iOS UIActivityIndicatorView(指示控制器)用法总结

对于UIActivityIndicatorView的使用,我们一般会创建一个背景View,设置一定的透明度,然后将UIActivityIndicatorView...

771
来自专栏Coco的专栏

浅析inline-block--使用inline-block创建布局

1797
来自专栏Android常用基础

自定义View(三)-动画-属性动画ValueAnimator

之前我们把视图动画(也就是View动画)分析的差不多了,当然帧动画我们没有讲解,其实帧动画比较简单,就是通过顺序播放一系列的图像从而产生动画效果,可以简单理解为...

1182
来自专栏前端学习心得

CSS中的BFC

1915
来自专栏前端架构与工程

CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:bef...

1929
来自专栏极乐技术社区

『组件』大转盘、刮刮乐、老虎机……

组件 框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。 什么是组件: 组件是视图层的基本组成单元。 组件自带一些功能与微信风格的样...

3326
来自专栏练小习的专栏

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional ...

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

CSS理解之Float

1524
来自专栏九彩拼盘的叨叨叨

那些 CSS 的设计失误(译)

CSS Working Group 写的 Incomplete List of Mistakes in the Design of CSS 。译的不好,请见谅。

731

扫码关注云+社区