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

相关文章

来自专栏一“技”之长

Java开发GUI之可编辑区域 原

    Java的awt包中提供了单行的文本编辑组件TextField与多行的文本编辑区TextArea,这两个组件都是继承自TextComponent类。

782
来自专栏超然的博客

Float 的那些事

  display:inline-block某种意义上的作用就是包裹(wrap),而浮动也有类似的效果。举个常见例子,或许您有实现宽度自适应按钮的经验,实现宽度...

923
来自专栏cnblogs

CSS3新特性应用之字体排印

一、插入换行 ~:表示同辈元素之后指定类型的元素,如;elm1 ~ elm2表示,elm1之后的所有elm2元素,且elm1与elm2都是在同一个父级元素。 +...

1987
来自专栏练小习的专栏

比例字体&等宽字体

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

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

那些 CSS 的设计失误(译)

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

801
来自专栏Nian糕的私人厨房

Canvas 让你的屏幕下一场 Hacker 流星雨吧

今天来分享一个很狂拽酷炫吊炸天的特效,其装逼效果不亚于上面那张入侵五角大楼导弹制导系统的概念图(手动滑稽),实现起来很简单,跟着动手一起来吧

842
来自专栏Android常用基础

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

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

1812
来自专栏河湾欢儿的专栏

浮动与清除浮动

浮动 float半脱离文档流(对元素,脱离文档流;对内容,在文档流) 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了...

831
来自专栏Python研发

CSS

CSS是Cascading Style Sheets的加简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。

1723
来自专栏极乐技术社区

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

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

4466

扫码关注云+社区