[CSS]浮动

最新推荐文章于 2024-11-01 15:19:31 发布

小炜1128

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量804

点赞数 1

分类专栏：前端学习笔记文章标签： 1024程序员节前端框架 html css css3

本文链接：https://blog.csdn.net/m0_53022813/article/details/127481530

版权

前端学习笔记专栏收录该内容

32 篇文章 5 订阅

订阅专栏

本文详细介绍了网页布局中的浮动布局，包括浮动的语法、实现方法及其特性。通过实例展示了如何使用浮动实现元素的横向排列，并探讨了浮动元素对标准流的影响及清除浮动的方法，如额外标签法、overflow隐藏和伪元素。内容覆盖了浮动布局的常见应用场景和注意事项，旨在帮助读者掌握这一重要的前端布局技巧。

摘要由CSDN通过智能技术生成

前言

系列文章目录：
[目录]HTML CSS JS

根据视频和PPT整理
视频及对应资料：
HTML CSS
老师笔记： https://gitee.com/xiaoqiang001/html_css_material.git
视频：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程
视频对应资源
链接：【https://pan.baidu.com/s/1k1dpC6iGA93c6gVsUvPqYw】
提取码：1234
【GitHub 仓库链接】

文章目录

前言
1. 传统网页布局的三种方式
2. 标准流（普通流/文档流）
3. 浮动
3.1 语法
3.2 浮动实现
3.3 浮动元素的特性
3.3.1 脱标
3.3.2 浮动的元素会在一行内显示并且顶端对齐排列
3.3.3 浮动元素会具有行内块元素特性

3.4 浮动元素经常和标准流父级搭配使用
3.5 浮动布局练习
3.5.1 练习1
3.5.2 练习2
3.5.3 练习3

4. 常见网页布局
5. 浮动布局注意点
5.1 浮动和标准流的父盒子搭配
5.2 一个元素浮动了，理论上其余的兄弟元素也要浮动
5.3 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

6. 清除浮动
6.1 为什么需要清除浮动
6.2 清除浮动本质
6.3 清除浮动语法
6.4 清除浮动方法
6.4.1 额外标签法
6.4.2 父级添加 overflow 属性
6.4.3 父级添加after伪元素
6.4.4 父级添加双伪元素

6.5 清除浮动总结

1. 传统网页布局的三种方式

网页布局的本质就是使用 CSS 来摆放盒子，把盒子摆放到相应位置。

CSS 提供了三种布局方式(就是盒子如何进行排列摆放)：

普通流（标准流）
浮动
定位

CSS 提供的三种布局方式都是用来摆放盒子的。

2. 标准流（普通流/文档流）

所谓的标准流就是标签按照规定好默认方式排列。标准流是最基本的布局方式。

块级元素会独占一行，从上向下顺序排列。常用块级元素：div、hr、p、h1~h6、ul、ol、dl、form、table。行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用行内元素：span、a、i、em 等。

3. 浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

3.1 语法

需要实现浮动，使用 float 属性，float 属性用于创建浮动框，将其移动到父元素的左边缘或右边缘触，如果当前浮动框前有另一个浮动框，则移动到上一个浮动框的边缘。

浮动的盒子中间是没有缝隙的，是紧挨着一起的.

语法：

选择器 { float: 属性值; }

在这里插入图片描述

3.2 浮动实现

<style>
  div {
    width: 100px;
    height: 100px;
    /* 两个盒子左浮动 */
    float: left;
  }
  .left {
    background-color: coral;
  }
  .right {
    background-color: brown;
  }
</style>
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

left 盒子先进行左浮动，由于前面没有其他左浮动元素，所以 left 盒子放在父元素的左边缘；right 盒子进行左浮动，由于前面已经有 left 盒子左浮动，所以 right 盒子放在 left 盒子的右边。

<style>
  div {
    width: 100px;
    height: 100px;
    /* 两个盒子右浮动 */
    float: right;
  }
  .left {
    background-color: coral;
  }
  .right {
    background-color: brown;
  }
</style>
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

left 盒子先进行右浮动，由于前面没有其他右浮动元素，所以 left 盒子放在父元素的右边缘；right 盒子进行右浮动，由于前面已经有 left 盒子右浮动，所以 right 盒子放在 left 盒子的左边。

<style>
  div {
    width: 100px;
    height: 100px;
    /* float: right; */
  }
  .left {
    background-color: coral;
    float: left;
  }
  .right {
    background-color: brown;
    float: right;
  }
</style>
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

left 盒子先进行左浮动，由于前面没有其他左浮动元素，所以 left 盒子放在父元素的左边缘；right 盒子进行右浮动，由于前面没有其他盒子右浮动，所以 right 盒子放在父元素的右边缘。

3.3 浮动元素的特性

加了浮动之后的元素的特性：

浮动元素会脱离标准流(脱标)
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性.

3.3.1 脱标

设置了浮动（float）的元素会脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标，且浮动的盒子不再保留原先的位置。

在这里插入图片描述

<style>
  .left {
    width: 100px;
    height: 100px;
    background-color: coral;
    float: left;
  }
  .right {
    width: 200px;
    height: 200px;
    background-color: brown;
  }
</style>
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

3.3.2 浮动的元素会在一行内显示并且顶端对齐排列

如果多个盒子都设置了浮动，则它们会按照属性值，在一行内显示并且顶端对齐排列。且浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

  <style>
    div {
      float: left;
    }
    .one {
      width: 400px;
      height: 400px;
      background-color: aquamarine;
    }
    .two {
      width: 300px;
      height: 300px;
      background-color: rgb(21, 209, 146);
    }
    .three {
      width: 200px;
      height: 200px;
      background-color: coral;
    }
    .four {
      width: 100px;
      height: 100px;
      background-color: brown;
    }
  </style>
  <body>
    <div class="two"></div>
    <div class="one"></div>
    <div class="three"></div>
    <div class="four"></div>
  </body>

3.3.3 浮动元素会具有行内块元素特性

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

行内元素有了浮动，不需要转换为块级或行内块元素就可以直接设置高度和宽度。

行内元素设置高度和宽度无效。

  <style>
    span {
      width: 100px;
      height: 100px;
      background-color: brown;
      float: left;
    }
  </style>
  <body>
    <span>123</span>
  </body>

如果块级盒子，没有设置宽度默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

  <style>
    div {
      height: 100px;
      background-color: brown;
      float: left;
    }
  </style>
  <body>
    <div>123</div>
  </body>

3.4 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置, 我们网页布局一般采取的策略是，先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

在这里插入图片描述

3.5 浮动布局练习

网页布局第二准则：先设置盒子大小，再设置盒子位置

3.5.1 练习1

<style>
  .box {
    width: 1200px;
    height: 460px;
    background-color: darkorange;
    /* 水平居中 */
    margin: 0 auto;
  }
  .left {
    /* 左浮动 */
    float: left;
    width: 230px;
    height: 460px;
    background-color: burlywood;
  }
  .right {
    /* 右浮动 */
    float: right;
    width: 970px;
    height: 460px;
    background-color: cadetblue;
  }
</style>
<body>
  <div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

3.5.2 练习2

<style>
  /* 清除所有元素的内外边距 */
  * {
    padding: 0;
    margin: 0;
  }
  /* 清除 li 的默认样式 */
  li {
    list-style: none;
  }
  .box {
    width: 1226px;
    height: 285px;
    background-color: aquamarine;
    /* 水平居中 */
    margin: 0 auto;
  }
  .box li {
    width: 296px;
    height: 285px;
    background-color: burlywood;
    /* 左浮动 */
    float: left;
    /* 设置右外边距 */
    margin-right: 14px;
  }
  /* 取消最后一个 li 的右外边距 */
  /* 必须写 .box .last 权重不能低于 .box li */
  .box .last {
    margin-right: 0;
  }
</style>
<body>
  <ul class="box">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="last">4</li>
  </ul>
</body>

3.5.3 练习3

<style>
  .box {
    width: 1226px;
    height: 615px;
    background-color: bisque;
    /* 水平居中 */
    margin: 0 auto;
  }
  .left {
    /* 左浮动 */
    float: left;
    width: 234px;
    height: 615px;
    background-color: brown;
  }
  .right {
    /* 右浮动 */
    float: right;
    width: 992px;
    height: 615px;
    background-color: cadetblue;
  }
  /* 选择 .right 下子元素 div 避免影响 div 内的子元素 */
  .right>div {
    /* 左浮动 */
    float: left;
    width: 234px;
    height: 300px;
    background-color: burlywood;
    /* 设置左外边距 */
    margin-left: 14px;
    /* 设置下外边距 */
    margin-bottom: 14px;
  }
</style>
<body>
  <div class="box">
    <div class="left"></div>
    <div class="right">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </div>
</body>

下面的四个盒子不会撑大父级元素是因为设置浮动脱离的标准流，父级元素为标准流，不在同一个层次上。

4. 常见网页布局

在这里插入图片描述

5. 浮动布局注意点

5.1 浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

5.2 一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

5.3 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

<style>
.one {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}
.two {
  /* 左浮动 */
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}
.three {
  width: 200px;
  height: 200px;
  background-color: pink;
}
</style>
<body>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</body>

6. 清除浮动

6.1 为什么需要清除浮动

由于父级盒子很多情况下，不方便给高度(如子元素的个数不确定时)，但是子盒子浮动，浮动元素不再占用原文档流的位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子，会对后面的元素排版产生影响。

在这里插入图片描述

6.2 清除浮动本质

清除浮动的本质是清除浮动元素脱离标准流造成的影响.

如果父盒子本身有高度，则不需要清除浮动

清除浮动之后，父级元素就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

6.3 清除浮动语法

选择器{clear:属性值;}

在这里插入图片描述

我们实际工作中，几乎只用 clear: both;

清除浮动的策略是: 闭合浮动。

闭合浮动，把子元素的浮动范围限制在父元素内，即只能在父元素内进行浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子.

6.4 清除浮动方法

额外标签法也称为隔墙法，是 W3C 推荐的做法。
父级添加 overflow 属性
父级添加after伪元素
父级添加双伪元素

6.4.1 额外标签法

额外标签法也称为隔墙法，是 W3C 推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签，同时为该标签添加清除浮动影响的属性。例如 <div style=”clear:both”></div>，或者其他标签（如<br />等）。

  <style>
    .box {
      width: 500px;
      /* height: 200px; */
      border: 2px solid black;
      margin: 0 auto;
    }
    .box .one {
      float: left;
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    .box .two {
      float: right;
      width: 200px;
      height: 200px;
      background-color: blueviolet;
    }
    .three {
      height: 300px;
      background-color: brown;
    }
    .clear {
      clear: both;
    }
  </style>
  <body>
    <div class="box">
      <div class="one"></div>
      <div class="two"></div>
      <!-- 浮动元素末尾添加空标签 -->
      <!-- 为该标签添加清除浮动影响的属性 -->
      <!-- 清除左右浮动对该标签的影响 -->
      <div class="clear"></div>
    </div>
    <div class="three"></div>
  </body>

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

6.4.2 父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

子不教,父之过,注意是给父元素添加代码。子元素浮动对父元素外其他元素造成影响是父元素没有管理好子元素。

优点：代码简洁
缺点：无法显示溢出的部分

  <style>
    .box {
      /* 清除浮动 */
      overflow: hidden;
      width: 500px;
      /* height: 200px; */
      border: 2px solid black;
      margin: 0 auto;
    }
    .box .one {
      float: left;
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    .box .two {
      float: right;
      width: 200px;
      height: 200px;
      background-color: blueviolet;
    }
    .three {
      height: 300px;
      background-color: brown;
    }
  </style>
  <body>
    <div class="box">
      <div class="one"></div>
      <div class="two"></div>
    </div>
    <div class="three"></div>
  </body>

6.4.3 父级添加after伪元素

:after 方式是额外标签法的升级版。

给父元素添加：

/* 为父元素添加如下属性 */ 
.clearfix:after { 
  /* after 伪元素必须有content属性 */ 
  content: ""; 
  /* 默认是行内元素，需要转化为块元素 */ 
  display: block; 
  height: 0; 
  /* 清除左右浮动的影响 */ 
  clear: both; 
  visibility: hidden; 
} 
.clearfix { /* IE6、7 专有，兼容ie */ 
 *zoom: 1;
}

优点：没有增加标签，结构更简单
缺点：需要照顾低版本浏览器

  <style>
    /* 为父元素添加如下属性 */
    /* 会在指定的盒子内的最后添加一个盒子，该盒子默认为行内元素 */
    .clearfix:after {
      /* after 伪元素必须有content属性 */
      content: '';
      /* 默认是行内元素，需要转化为块元素 */
      display: block;
      height: 0;
      /* 清除左右浮动的影响 */
      clear: both;
      visibility: hidden;
    }
    .clearfix {
      /* IE6、7 专有，兼容ie */
      *zoom: 1;
    }
    .box {
      width: 500px;
      /* height: 200px; */
      border: 2px solid black;
      margin: 0 auto;
    }
    .box .one {
      float: left;
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    .box .two {
      float: right;
      width: 200px;
      height: 200px;
      background-color: blueviolet;
    }
    .three {
      height: 300px;
      background-color: brown;
    }
  </style>
  <body>
    <div class="box clearfix">
      <div class="one"></div>
      <div class="two"></div>
    </div>
    <div class="three"></div>
  </body>

6.4.4 父级添加双伪元素

也是给给父元素添加：

/* 在父盒子的最前面添加一个盒子，最后添加一个盒子 */
.clearfix:before,.clearfix:after {
  content:"";
  display:table; 
}
.clearfix:after {
  clear:both;
}
/* 兼容ie */
.clearfix {
  *zoom:1;
}

优点：代码更简洁
缺点：需要照顾低版本浏览器

  <style>
    /* 在父盒子的最前面添加一个盒子，最后添加一个盒子 */
    .clearfix:before,
    .clearfix:after {
      content: '';
      display: table;
    }
    .clearfix:after {
      clear: both;
    }
    /* 兼容ie */
    .clearfix {
      *zoom: 1;
    }
    .box {
      width: 500px;
      /* height: 200px; */
      border: 2px solid black;
      margin: 0 auto;
    }
    .box .one {
      float: left;
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    .box .two {
      float: right;
      width: 200px;
      height: 200px;
      background-color: blueviolet;
    }
    .three {
      height: 300px;
      background-color: brown;
    }
  </style>
  <body>
    <div class="box clearfix">
      <div class="one"></div>
      <div class="two"></div>
    </div>
    <div class="three"></div>
  </body>