CSS-7 浮动 float；浮动规则；案例练习；clear清除浮动，浮动高度坍塌问题；布局方案总结；flex布局；flex与float的区别；

龙猫呗

已于 2023-06-10 16:31:36 修改

阅读量237

点赞数

分类专栏： CSS 文章标签： css 学习笔记

于 2023-05-06 00:06:20 首次发布

本文链接：https://blog.csdn.net/qq_54075517/article/details/130517608

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1_浮动 float

1.1_认识

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

none：不浮动，默认值

left：向左浮动

right：向右浮动

1.2_浮动规则

浮动规则一

元素一旦浮动后, 脱离标准流,朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
层叠大小比较：普通元素<浮动元素<定位元素

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

浮动规则三:浮动元素之间不能层叠

如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）

如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

浮动规则四:浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

比如行内级元素、inline-block元素、块级元素的文字内容

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

1.3_案例练习

案例一：百度搜索的页码

  <style>
    /* 样式的重置 */
    ul, li {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    a {
      text-decoration: none;
      color: #333;
    }

    /* 全局设置 */
    body {
      background-color: #f2f2f2;
    }

    /* 内容样式 */
    ul > li {
      float: left;
      margin-left: 12px;
    }

    ul > li > a {
      display: inline-block;
      width: 36px;
      height: 36px;
      text-align: center;
      /* text-align: center;水平方向居中 */ 
      line-height: 36px;
      /*  line-height 与height 值相等，垂直方向居中 */
      border-radius: 6px;
      background-color: #fff;
      color: #3951b3;
      font-size: 14px;
    }

    ul > li > a:hover, ul > li.active > a {
      background-color: blue;
      color: #fff;
    }

    ul > li.next > a {
      width: 80px;
    }

  </style>

<body>
  
  <!-- 结构: HTML -->
  <ul>
    <li class="item"><a href="#">1</a></li>
    <li class="item"><a href="#">2</a></li>
    <li class="item"><a href="#">3</a></li>
    <li class="item"><a href="#">4</a></li>
    <li class="item active"><a href="#">5</a></li>
    <li class="item"><a href="#">6</a></li>
    <li class="item"><a href="#">7</a></li>
    <li class="item"><a href="#">8</a></li>
    <li class="item"><a href="#">9</a></li>
    <li class="item"><a href="#">10</a></li>
    <li class="item next"><a href="#">下一页 &gt;</a></li>
  </ul>

</body>

案例二：京东5列布局

  <style>
    /* 公共的class */
    .content {
      width: 1190px;
      /*  1190= 230*5+10*4   */
      margin: 0 auto;
      background-color: orange;
      height: 800px;
    }

    /* 布局样式 */
    .item {
      width: 230px;
      height: 322px;
      background-color: purple;
      color: #fff;
      /* 浮动 */
      float: left;
      /* 让每个 .item 向左浮动10px */
      margin-right: 10px;
      /* margin: 0 5px; */
    }
    
    .box {
      /* margin: 0 -5px; */
      /* 3.方案三: 设置负的的margin(没有兼容性) */
      /*  1190=1200+(-10) ||  1200=230*5+10*5 */
      margin-right: -10px;
    }

    /* 1.有可能存在兼容性 */
    /* .item:nth-child(5n) {
      margin-right: 0;
    } */
    
    /* 2.麻烦一点点 */
    /* .item.last-item {
      margin-right: 0;
    } */
  </style>
</head>
<body>
  
  <div class="content">
    <div class="box">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
  </div>

</body>

案例三：京东三列布局

 <style>
    .content {
      width: 1190px;
      /* 1190=290*4+10*3  */
      margin: 0 auto;
      background-color: #f00;
      height: 1000px;
    }

    .wrapper {
      margin-right: -10px;
    }

    .item {
      width: 290px;
      background-color: purple;
      margin-bottom: 10px;

      float: left;
      margin-right: 10px;
    }

    .item.left {
      height: 370px;
      /* 370=180*2+10   ||  margin-bottom: 10px;  */
    }

    .item.right {
      height: 180px;
    }
  </style>
</head>
<body>
  
  <div class="content">
    <div class="wrapper">
      <div class="item left"></div>
      <div class="item left"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
    </div>
  </div>

</body>

案例四：考拉边框布局【难但是少见】

<style>
    .content {
      width: 1100px;
      margin: 0 auto;
      height: 800px;
      background: #ccc;
    }

    .box {
      /* margin-left: 1px; */
    }

    .item {
      width: 221px;
      /* 221*5=1105 */
      height: 168px;
      background: orange;
      color: #fff;

      float: left;

      border: 1px solid #000;
      margin-right: -1px;
      /* margin-right让每个item向左移1px，达到边框重叠故宽度减少，所以1105-4=1101，多出来的1px向左移1px，不在父容器范围内*/

      box-sizing: border-box;
      /* 元素的总高度和宽度包含内边距和边框(padding 与 border) : */
    }

    .item.first {
      width: 220px;
    }
  </style>
</head>
<body>
  
  <div class="content">
    <div class="box">
      <div class="item first">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>

</body>

1.4_浮动的问题 – 高度塌陷

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

父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）用clear属性
清浮动的目的是：让父元素计算总高度的时候，把浮动子元素的高度算进去

1.5_clear属性

clear 可指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
clear的常用取值

left：要求元素的顶部低于之前生成的所有左浮动元素的底部

right：要求元素的顶部低于之前生成的所有右浮动元素的底部

both：要求元素的顶部低于之前生成的所有浮动元素的底部

none：默认值，无特殊要求

1.6_清除浮动的方法

方法一: 给父元素设置固定高度

扩展性不好（不推荐)

方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both

会增加很多无意义的空标签，维护麻烦

违反了结构与样式分离的原则（不推荐）
方法三: 给父元素添加一个伪元素

推荐、编写好后可以轻松实现清除浮动;

<style>
    .content {
      width: 1190px;
      margin: 0 auto;
      background: #f00;
    }

    .wrapper {
      margin-right: -10px;
    }

    .item {
      width: 290px;
      background-color: purple;
      margin-bottom: 10px;

      float: left;
      margin-right: 10px;
    }

    .item.left {
      height: 370px;
    }

    .item.right {
      height: 180px;
    }

    /* 其他的内容 */
    .other {
      height: 100px;
      background: #0f0;
    }

    .line {
      /* height: 10px; */
      /* background: blue; */
      clear: both;
    }

    /* 清除浮动--最终的解决方案（给父元素添加一个伪元素） */
    .clear_fix::after {
      content: "";
      /*伪元素必须要有content*/
      clear: both;
      display: block;

      /* 浏览器兼容 */
      visibility: hidden;
      height: 0;
    }

    .clear_fix {
      /* IE6/7 */
      *zoom: 1;
    }
  </style>
</head>
<body>
  
  <!-- 因为所有的后代item元素都是浮动的, 脱离标准流 -->
  <!-- 不会向父元素汇报高度, 那么content元素压根就没有高度 -->
  <div class="content">
    <div class="wrapper clear_fix">
      <div class="item left"></div>
      <div class="item left"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>

      <!-- <div class="line"></div> -->
    </div>
  </div>
  </body>

1.7_布局方案总结

定位方案	应用场景
normal flow（标准流）	垂直布局
absolute positioning（绝对定位）	层叠布局
float（浮动	水平布局

2_ display: flex

2.1_认识flexbox

英译中为弹性盒子

弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;

元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;

通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);

是目前web开发中使用最多的布局方案：

flex 布局（Flexible 布局，弹性布局）;

目前特别在移动端可以说已经完全普及;

在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;
为什么需要flex布局

长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 float和 positioning。

但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举

2.2_flex布局的重要概念

两个重要的概念：

开启了 flex 布局的元素叫 flex container

flex container 里面的直接子元素叫做 flex item

当flex container中的子元素变成了flex item时, 具备特点:

flex item的布局将受flex container属性的设置来进行控制和布局;

flex item不再严格区分块级元素和行内级元素;

flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

flex： flex container 以 block-level 形式存在

inline-flex： flex container 以 inline-level 形式存在

2.3_flex布局的模型

flex布局模型

2.4_flex相关的CSS属性

flex container【父元素】

设置display：flex；

flex-direction:flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布

flex-direction 决定了 main axis 的方向，有 4 个取值
row（默认值，水平从左到右）、row-reverse（水平从右到左）、
column（垂直从上到下）、column-reverse（垂直从下到上）

flex-wrap:决定了 flex container 是单行还是多行

nowrap（默认）：单行
wrap：多行
wrap-reverse：多行（对比 wrap，cross start 与 cross end 相

flex-flow: 是 flex-direction 和 flex-wrap 的简写, 任何顺序, 并且都可以省略;

justify-content

在这里插入图片描述

align-items（交叉轴方向)

在这里插入图片描述

当在normal或者stretch情况下，flex items的高度未设置或者为auto是，item会自动在垂直方向拉伸填充，相反的，如果height为一个确定值，不会被拉伸
center 用的最多

align-content

前提要设置 flex-wrap: wrap;

在这里插入图片描述

flex items【子元素】

flex-grow(拉伸)

flex-grow 决定了 flex items 如何扩展

可以设置任意非负数字（正小数、正整数、0）默认值是 0；
当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效

如果所有 flex items 的 flex-grow 总和 sum 超过 1：每个 flex item 扩展的 size 为flex container 的剩余 size *（对应flex-grow/ sum）
flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-shrink（缩小）

flex-shrink 决定了 flex items 如何收缩

可以设置任意非负数字（正小数、正整数、0）默认值是 1；

当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为 flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
flex items 收缩后的最终 size 不能小于 min-width\min-heigh

flex-basis【极少用】

flex-basis 用来设置 flex items 在 main axis 方向上的 base size。

auto（默认值）、具体的宽度数值（100px）

决定 flex items 最终 base size 的因素，从优先级高到低

max-width\max-height\min-width\min-height ；

flex-basis ；

width\height ；

内容本身。

flex
flex是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值

单值语法: 值必须为以下其中之一:

一个无单位数(): 它会被当作的值。

一个有效的宽度(width)值: 它会被当作的值。

关键字none，auto或initial.

双值语法: 第一个值必须为一个无单位数，并且它会被当作的值。

第二个值必须为以下之一：

✓ 一个无单位数：它会被当作的值。

✓ 一个有效的宽度值: 它会被当作的值。

三值语法:

第一个值必须为一个无单位数，并且它会被当作的值。

第二个值必须为一个无单位数，并且它会被当作的值。

第三个值必须为一个有效的宽度值，并且它会被当作的值

	  /* flex-grow flex-shrink flex-basis */
      /* none: 0 0 auto */
      /* auto: 1 1 auto */
      flex: 1 1 10px;

order

在这里插入图片描述

align-self

2.5_解决一个案例

在这里插入图片描述

<style>
    .container {
      width: 500px;
      background-color: orange;

      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .item {
      width: 110px;
      height: 140px;

      /* margin-right: 20px; */
    }

    .container > i {
      width: 110px;
    }

    /* .item:nth-child(4n) {
      margin-right: 0;
    } */
  </style>
</head>
<body>
  
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item3">3</div>
    <!-- 添加span/i的个数是列数减2 -->
   <i></i><i></i>
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

3_区别float与flex

float和flex在视觉上直观的区别就是：

float元素宽高和元素之间的间距都是固定的，随着页面缩小，元素会换行。（可以设置为不换行）。

flex布局的元素宽高和元素之间的间距是变化的，随着页面缩小，父类空白空间减少，元素能分配到的空间也减少，元素的间距也减少。

龙猫呗

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS-7 浮动 float；浮动规则；案例练习；clear清除浮动，浮动高度坍塌问题；布局方案总结；flex布局；flex与float的区别；

浮动 float;浮动规则;案例练习;clear清除浮动，解决高度坍塌问题;布局方案总结;flex布局；flex与float的区别；flex-direction；flex-wrap；flex-flow；justify-content；align-items；align-content；flex-grow；flex-shrink；flex-basis；order；align-self；
复制链接

扫一扫