css 浮动

未深爱
217 阅读3分钟

[TOC]

浮动布局

认识浮动

  • float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
    • float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;
    • 但是早期的 CSS 标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;
  • 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
  • 可以通过 float 属性让元素产生浮动效果，float 的常用取值
    • none：不浮动，默认值
    • left：向左浮动
    • right：向右浮动

浮动的规则

浮动规则一

  • 元素一旦浮动后, 脱离标准流
    • 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
    • 定位元素会层叠在浮动元素上面

      定位元素 > 浮动元素 > 普通元素

浮动规则二

  • 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

浮动规则三

  • 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）浮动元素之间不能层叠
  • 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
<style>
  .content > .one,
  .two,
  .three {
    width: 200px;
    height: 100px;

    float: left;
  }

  .one {
    background-color: blue;
  }

  .two {
    background-color: red;
  }

  .three {
    background-color: aqua;
  }
</style>
<div class="content">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

浮动规则四

  • 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
    • 比如行内级元素、inline-block 元素、块级元素的文字内容

浮动规则五

  • 行内级元素、inline-block 元素浮动后，其顶部将与所在行的顶部对齐

浮动的案例

空隙的解决方案

  • 1.标签不换行
  • 2.父级元素 font-size:0 子元素设置字体大小
  • 3.float
  • 4.flex 布局

清除的案例

浮动的问题 – 高度塌陷

  • 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

    • 解决方法 1：清除浮动

      CSS 属性 - clear clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;

      • clear 的常用取值

        • left：要求元素的顶部低于之前生成的所有左浮动元素的底部
        • right：要求元素的顶部低于之前生成的所有右浮动元素的底部
        • both：要求元素的顶部低于之前生成的所有浮动元素的底部
        • none：默认值，无特殊要

    • 解决方法 2：给父元素盒子设置固定高度

    • 解决方法 3: 给父元素添加一个伪元素

清除的问题

清除浮动

/* 给浮动元素添加伪元素 */
.clear-float::after {
  content: "";
  display: block;
  clear: both;

  visibility: hidden;
  height: 0;
}

布局方案对比

定位方案应用场景
normal flow (标准流)垂直布局
absolute positioning(绝对定位)层叠布局
float (浮动)水平布局（现在不常用）
avatar
文章
阅读
粉丝