Skip to main content

CSS清除浮动

overflow: hidden

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

（面试题）：

  • 单行文本出现省略号（4个必备条件，缺一不可）

    • width 宽度（不写宽度，默认继承父元素宽度）
    • overflow: hidden;（溢出隐藏）
    • white-space: nowrap;
    • text-overflow: ellipsis;文字隐藏的方式，以省略号的方式隐藏

  • 多行文本出现省略号（必备条件，主要应用在移动端）

    • display: -webkit-box; 弹性盒模型
    • -webkit-box-orient: vertical;规定元素的排列方式：垂直排列
    • -webkit-line-clamp: 2;：文字的行数（自定义）
    • overflow: hidden;溢出隐藏

  • 多个元素在一行显示的方法

    • display: inline;
    • display: inline-block;
    • float: left/right;

display: inline-block;元素的特点

  • 盒子横向排列

  • verticle-align属性会影响inline-block元素，值可能会设为top

  • 需要设置每一列的宽度

  • 如果HTML源码中元素间有空格，列与列之间会产生空隙

    • 解决方法：
      • 如果元素添加了dispay: inline-block;，父元素增加一个属性font-size: 0;，同时在元素本身增加font-size属性进行覆盖

  • display:inline-block;在IE6/7下不兼容的解决方法

    • 增加display: inline; zoom: 1;属性

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

  • 直接让块元素设置为内联对象（设置属性 display: inline;），然后触发块元素的layout（如：zoom: 1;等）。
  • 兼容各浏览器的代码如下：div {display: inline-block; *display: inline; *zoom: 1;}

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;属性
    • clear清除浮动元素对文档流内元素的影响（可以让文档流内的元素识别到浮动元素的高度）
    • left清除float为left的影响
    • right清除float为right的影响
    • both清除float所有的影响
    • inherit从父级元素上继承该属性值
  4. clearfix清除浮动（固定代码）
    • 利用伪元素:after清除浮动必备条件，缺一不可
    • display: block;确保元素是一个块级元素
    • clear: both;不允许左右两边有浮动对象
    • content: '';伪元素:brfore/:after自带的属性，如果不写，伪元素不起作用
    • 写全的样式属性；不是必备条件
    • height: 0; 防止在低版本浏览器中默认height: 1px;的情况，用height: 0;去覆盖
    • font-size: 0; 字体大小
    • overflow: hidden; 溢出隐藏
    • visibility: hidden; 让所有可见性的元素隐藏

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. 元素必须放在最后一个浮动元素的后面