清除浮动方法总结

参考资料

理解

当容器的高度自适应,且容器的内容中有浮动的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

空div法

//在浮动元素后添加一个空标签
.clearfix {
  clear: both;
}
  • 优点:简单、代码少、浏览器兼容性好
  • 缺点:添加无语义的HTML元素,代码不够优雅

    设置高度

    如果父级元素高度能够确定,给浮动元素父级设置高度

利用伪元素

.clearfix:after {
  content: "\20"; //添加一个看不见的点或者空格
  display: block;
  height: 0;
  clear: both; //清除浮动
}
.clearfix {
  *zoom: 1; //zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发IE6,IE7的haslayout属性,清除浮动,清除margin重叠等作用。
}

BFC布局

  • 定义:块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
  • 特性
    • 内部的box会在垂直方向,从顶部开始一个接着一个地放置
    • box 垂直方向的距离由margin(外边距)决定。属于同一个BFC的两个相邻box的margin会发生叠加(例子所提到的盒子margin合并问题)
    • BFC的区域不会与float box叠加
    • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
    • 计算BFC高度时,浮动元素也参与计算
    • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
  • 触发
    • 根元素或其它包含它的元素;
    • 浮动 (元素的float不为none);
    • 绝对定位元素 (元素的position为absolute或fixed);
    • 行内块inline-blocks(元素的 display: inline-block);
    • 表格单元格(元素的display: table-cell,HTML表格单元格默认属性);
    • overflow的值不为visible的元素;
    • 弹性盒 flex boxes (元素的display: flex或inline-flex);
  • BFC的一个最重要的效果是,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性
  • 可以通过设置父级元素overflow:auto来清除浮动

  转载请注明: Blog 清除浮动方法总结

 上一篇
webpack学习笔记 webpack学习笔记
什么是webpackwebpack能够分析项目结构,找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言(比如Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。包括如下内容: 代码转换:将TypeS
2018-09-19
下一篇 
离线应用与客户端存储 离线应用与客户端存储
参考资料cookie和session细说localStorage, sessionStorage, Cookie, Session 离线检测 支持离线Web应用开发是HTML5的另一个重点 HTML5定义了一个navigator.onLin
2018-09-12
  目录