CSS清除浮动

overflow: hidden

  1. overflow溢出隐藏
  2. 清除浮动
  3. 解决margin-top的传递问题

(面试题)

display: inline-block;元素的特点

IE7下块元素兼容display: inline-block;写法?

float浮动

float元素的特点

  1. 在一行显示
  2. 设置属性值为left时,浮动元素依次从父级盒子的左侧向右排列
  3. 自动具有块级元素的属性,不需要添加display: block;
  4. 脱离文档流
  5. 子元素不会继承浮动属性
  6. 浮动元素下面的元素不能识别浮动元素的高度和位置,占据浮动元素的位置
  7. 所有的元素都可以使用浮动属性

文档流和脱离文档流

float元素产生的影响

  1. 父元素设置背景颜色background-color不起作用
  2. 父元素设置内边距属性padding不会被撑开
  3. 父元素设置边框属性border不会被撑开

清除浮动float

清除浮动的方法

  1. 给浮动元素的父级元素添加固定的高度height(不推荐)
  2. 给浮动元素的父级元素添加溢出隐藏属性overflow: hidden;
  3. 给最后一个浮动元素后面添加一个块级元素,这个块级元素带有clear: both;属性
  4. clearfix清除浮动(固定代码)

overflow: hidden;visibility: hidden;有什么区别?

(面试题):如何让一个元素消失?

  1. opacity: 0;[0-1] 透明度
  2. display: none; 隐藏
  3. widht/height/line-height + overflow:宽/高/行高 + 溢出隐藏
  4. visibility: hidden;让所有可见性的元素隐藏

clear: both;的特点

  1. 元素需要是块级元素
  2. 元素不能带有浮动属性
  3. 元素必须放在最后一个浮动元素的后面