CSS之元素浮动 (十一)：认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比

限量版甜甜圈

已于 2023-06-10 15:05:53 修改

阅读量1k

点赞数

分类专栏： CSS3 文章标签： css css3 前端 html

于 2023-05-23 18:24:39 首次发布

本文链接：https://blog.csdn.net/Sedrick_/article/details/130818368

版权

CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. 认识浮动

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

2. 浮动的规则

浮动的规则(浮动元素的特性)：
1. 元素设置浮动后会脱离标准流，变成了浮动元素
2. 浮动方式：向左或者向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
3. 浮动元素的层级：定位元素会层叠在浮动元素上面
4. 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
5. 浮动元素之间不能层叠
  - 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
  - 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
6. 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出: 比如行内级元素、inline-block元素、块级元素的文字内容
7. 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐，即只能在当前行浮动

3. 浮动的案例

3.1 案例一：解决行内级元素、inline-block元素的水平间隙问题

水平间隙存在的原因：换行和空格都会被浏览器解析成空格呈现在网页中
解决方案：
1. 删除每个行内级元素、行内块元素的换行符(不推荐)
2. 即将父级元素的font-size设置为0后空格就没有大小空间了, 但是需要子元素设置回来
3. 通过子元素(span)统一向一个方向浮动即可
4. flex布局(还没有学习)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <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;
      line-height: 36px;
      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>
</head>
<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>
</html>

3.2 案例二：浮动实现多列布局_margin负值技巧

遇到的问题：在多列布局中，浮动元素的最后一列元素往往因为设置了margin值导致元素排版不下，另起一行，我们需要单独去设置它的样式，会很不方便。
解决的笨方案
1. 方法一：.item:nth-child(5n) 使用伪类选择器，但可能有兼容性问题
2. 方法二:手动添加类
3. 方法三(不建议)：直接加宽包含块宽度，但会导致页面居中不准
聪明人的办法==> 夹盒子法(我自己取的)：将item再嵌套一层div.box盒子，设置负的margin值(没有兼容性)
- 原理：盒子模型公式=> 父盒子的宽度=margin-left+盒子的宽度+margin-right
- 1190=0+auto+(-10)，为使公式成立，div.box的宽度即为 1200

3.3 案例三：京东多列布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      width: 1190px;
      height: 1000px;
      margin: 0 auto;
      background-color: red;
    }

    /* 解决多列布局问题 */
    .wrapper {
      margin-right: -10px;
    }

    .item {
      float: left;
      width: 290px;
      background-color: purple;
      margin-bottom: 10px;
      margin-right: 10px;
    }


    .item.left {
      height: 370px;
    }

    .item.right {
      height: 180px;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="wrapper">
      <div class="item left">1</div>
      <div class="item left">2</div>
      <div class="item right">1</div>
      <div class="item right">2</div>
      <div class="item right">3</div>
      <div class="item right">4</div>
      <div class="item right">1</div>
      <div class="item right">2</div>
      <div class="item right">3</div>
      <div class="item right">4</div>
      <div class="item right">1</div>
      <div class="item right">2</div>
      <div class="item right">3</div>
      <div class="item right">4</div>
      <div class="item right">1</div>
      <div class="item right">2</div>
      <div class="item right">3</div>
      <div class="item right">4</div>
      <div class="item right">1</div>
      <div class="item right">2</div>
      <div class="item right">3</div>
      <div class="item right">4</div>
    </div>
  </div>
</body>

</html>

3.4 案例四：考拉多列布局案例练习

在这里插入图片描述

3.4.1 思路一：是一种有缺陷的方法(别学我)

思路一
1. 设置content大盒子的宽度 1100px
2. 给item添加一个wrapper的盒子 width是auto
3. 设置item的宽 220px 设置border边框盒子会撑大，因此设置box-sizing
4. 开启BFC防止wrapper高度塌陷
5. 给wrapper添加外边框，由于宽度为auto 因此真实宽度变成 1198
6. 给wrapper设置margin-right负值让wrapper的宽度变成1100
问题： 此时会发现，由于wrapper的上下边框的右边会又一点点线头

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 设置内容区宽度 1100 */
    .content {
      width: 1100px;
      height: 1000px;
      background-color: orange;
      margin: 0 auto;
      /* overflow: hidden; */
    }



    .item {
      float: left;
      width: 220px;
      /* width: 219.8px; */
      height: 168px;
    }


    /* 思路一：
      设置content大盒子的宽度 1100px 
      给item添加一个wrapper的盒子 width是auto
      设置item的宽 220px 设置border边框盒子会撑大，因此设置box-sizing
      开启BFC防止wrapper高度塌陷
      给wrapper添加外边框，由于宽度为auto 因此真实宽度变成 1198
      给wrapper设置margin-right负值 让wrapper的宽度变成1100
      问题：此时会发现，由于wrapper的上下边框的右边会又一点点线头
    */
    .wrapper {
      border: 1px solid #ccc;
      overflow: hidden;
      margin-right: -2px;
      border-right: none;
    }

    .item {
      border-right: 1px solid #ccc;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="wrapper">
      <div class="item">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>

</html>

3.4.2 思路二：margin负值在兄弟元素的应用(复杂)

思路二:
1. 设置content大盒子的宽度 1100px
2. 给item添加一个wrapper的盒子 width是auto
3. 设置item的宽 220px 设置border边框盒子会撑大，因此设置box-sizing
4. 兄弟元素使用margin负值，我们可以让右边四个div盖住前面div多余的边框
问题：因为是border-box，我们让盒子一共向左边移动了4px是整体的宽度
解决方案： 让所有item的宽度都加1，并且让第一个元素宽度减1或者就随它多1像素

在这里插入图片描述

总结： 我们需要知道使用margin-left是让自己盖在前面的兄弟元素上，而margin-right是让右边的兄弟元素盖自己身上.但无论是左还是右，最后至少会有一边会多1px，我们无法做到等分。以后遇到这种就是全部加边框，慢慢加负值搞吧
难点：综合上面的案例不难发现，当我们进行排版布局需要考虑边框时，计算就会很麻烦，我们需要知道边框给谁加，加上边框后宽度如何计算。像我们使用负值后，需要考虑的是显出给用户看的宽度，排除掉被盖住的部分，多多练习吧。

4. 浮动的问题 - 高度塌陷

什么是高度塌陷？：由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度。父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

5. 清除浮动

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

5.1 clear 属性

clear属性是做什么的呢？ 可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面
clear常用取值
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
- none：默认值，无特殊要求
清楚浮动有哪些方法呢？
1. 方法一 : ~~给父元素设置固定高度~~。 原因：扩展性不好（不推荐）
2. 方法二: ~~在父元素最后增加一个空的块级子元素，并且让它设置clear: both。~~ 原因：会增加很多无意义的空标签，维护麻烦；违反了结构与样式分离的原则，让html去解决css的问题（不推荐）
3. 正确的方法: 给父元素添加一个伪元素 编写好后可以轻松实现清除浮动
接下来着重介绍正确的清楚浮动操作
1. 设置一个公共类 clear_fix，并且设置伪元素::after
2. 其中 content 的内容是行内元素，如果没有内容就是不占空间，没办法告诉浏览器高度，那么就达不到我们的目的了
3. 因此我们需要设置 display:block ，添加clear:both让它位于所有浮动元素的底部，即便没有高度块级元素独占一行的特性可以向父元素汇报高度。
4. 同时有一些很鸡肋的浏览器，我们需要考虑兼容性，记一些固定写法，等到需要解决高度塌陷问题时，只需要添加 clearfix的类就好啦。

    /* 最终的解决方案 */
    .clear_fix::after {
      content: "";
      clear: both;
      display: block;

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

    .clear_fix {
      /* IE6/7 */
      *zoom: 1;
    }