CSS元素浮动

最新推荐文章于 2024-01-29 09:41:15 发布
最新推荐文章于 2024-01-29 09:41:15 发布
阅读量124 收藏
点赞数
分类专栏： # HTML-CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Welitsi/article/details/132340031
版权

一、认识浮动

◼ float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

  • float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;
  • 但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;

◼ 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

◼ 可以通过float属性让元素产生浮动效果，float的常用取值

  • none：不浮动，默认值
  • left：向左浮动
  • right：向右浮动

二、浮动的规则

1.浮动规则一

元素一旦浮动后, 脱离标准流

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

在这里插入图片描述

2.浮动规则二

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

在这里插入图片描述

3.浮动规则三

浮动元素之间不能层叠

  • 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
  • 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

在这里插入图片描述

4.浮动规则四

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

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

在这里插入图片描述

5.浮动规则五

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

在这里插入图片描述

三、浮动案例练习

1.百度分页案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>百度分页栏</title>
  <style>
    /* 重置css */
    a {
      text-decoration: none;
      color: #3951b3;
    }

    .container {
      padding: 14px 0 14px 150px;
      height: 64px;
      box-sizing: border-box;
      background-color: #f5f5f6;
      font-size: 14px;
    }

    .btn {
      float: left;
      width: 36px;
      height: 36px;
      margin-right: 10px;
      border-radius: 6px;
      background-color: #fff;
      text-align: center;
      line-height: 36px;
    }

    .btn-active,
    .btn:hover {
      background-color: #4e6ef2;
      color: #fff;
    }

    .container a.btn:nth-last-child(1) {
      width: 80px;
    }
  </style>
</head>
<body>
  <div class="container"><a href="#" class="btn btn-active">1</a><a href="#" class="btn">2</a><a href="#" class="btn">3</a><a href="#" class="btn">4</a><a href="#" class="btn">5</a><a href="#" class="btn">6</a><a href="#" class="btn">7</a><a href="#" class="btn">8</a><a href="#" class="btn">9</a><a href="#" class="btn">10</a><a href="#" class="btn">下一页></a>
  
  </div>
</body>
</html>

在这里插入图片描述

2.元素间空隙的解决方案

将多个行内级元素中间的空格(间隙)去除的方法

  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>
    .box {
      /* font-size: 0; */
      /* display: flex; */
    }

    span {
      background-color: orange;
      /* font-size: 16px; */

      /* float: left;
      margin-right: 5px; */
    }
  </style>
</head>
<body>
  <!-- 
    将多个行内级元素中间的空格(间隙)去除的方法
      1. 删除换行符(不推荐)
      2. 将父级元素的font-size设置为0, 但是需要子元素设置回来
      3. 通过子元素(span)统一向一个方向浮动即可
      4. flex布局(还没有学习)
   -->
  
  <div class="box">
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
  </div>

</body>
</html>

3.jd多列布局案例一

<!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>
    /* 公共的class */
    .content {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      height: 800px;
    }

    /* 布局样式 */
    .box {
      /* margin: 0 -5px; */
      /* 3.方案三: 设置负的的margin(没有兼容性) */
      margin-right: -10px;
    }

    .item {
      width: 230px;
      height: 322px;
      background-color: purple;
      color: #fff;

      /* 浮动 */
      float: left;
      margin-right: 10px;
      /* margin: 0 5px; */
    }

    /* 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>
</html>

在这里插入图片描述

4.jd多列布局案例二

<!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;
      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;
    }

    .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>
</html>

在这里插入图片描述

5.考拉布局案例

<!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: 1100px;
      margin: 0 auto;
      height: 800px;
      background: #ccc;
    }

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

    .item {
      width: 221px;
      height: 168px;
      background: orange;
      color: #fff;

      float: left;

      border: 1px solid #000;
      margin-right: -1px;

      box-sizing: border-box;
    }

    .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>
</html>

在这里插入图片描述

四、浮动的问题 - 高度塌陷

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

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

解决父元素高度坍塌问题的过程，一般叫做 清浮动（清理浮动、清除浮动）

清浮动的目的是

  • 让父元素计算总高度的时候，把浮动子元素的高度算进去

如何清除浮动呢? 使用 clear 属性

1.CSS属性 - clear

clear 属性是做什么的呢?

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

clear 的常用取值

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

那么我们可以利用这个特性来清除浮动

2.清除浮动的方法

事实上我们有很多方法可以清除浮动

2.1方法一

给父元素设置固定高度

  • 扩展性不好（不推荐）

2.2方法二

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

  • 会增加很多无意义的空标签，维护麻烦
  • 违反了结构与样式分离的原则（不推荐）

2.3方法三

给父元素增加::after伪元素

  • 推荐;
  • 纯CSS样式解决，结构与样式分离
  • 编写好后可以轻松实现清除浮动;
<!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;
      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: "";
      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>
  
  <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>

  <!-- 我认为content没有高度, 那么我们就会直接在上面显示 -->
  <div class="other"></div>

</body>
</html>

五、布局方案总结

在这里插入图片描述

DustinWangq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 同级元素浮动分析小结
09-22
主要介绍了CSS 同级元素浮动分析小结的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS 清除浮动元素方法 整理
09-25
浮动布局是一种常见的CSS技术，它允许元素在页面上左右浮动，以实现灵活的多列布局。然而，浮动元素可能会引发一个问题，即它们会脱离正常的文档流，导致其父元素的高度无法自动扩展，从而产生所谓的“浮动塌陷”。...
CSS的浮动属性
weixin_57219176的博客
08-28 194
CSS的浮动属性
CSS浮动属性
ZhooooYuChEnG的博客
02-23 167
浮动属性 浮动可以让元素一个挨着一个。创建一个布局，同时可以设置自身尺寸和父元 素容器的尺寸大小。一个元素浮动时，其他元素会围着它。 浮动存在的问题 典型问题是一个父元素里面创建多个浮动子元素后，页面内容设置一个宽度，子元素的浮动确定了他们的位置，但浮动的元素不改变父元素的宽度。这样会让父元素塌陷的，显示出来的父元素的高度就变成了0，导致它的好多属性被隐藏了，这种现象多数时候被忽略，...
Css浮动属性
jhaglkl的博客
02-22 960
先来说一下什么是浮动，简单来说就是将上下排列的元素让它们来左右显示。复杂点是指设置了浮动属性的元素会脱离标准普通流的控制，移动到父元素中指定位置的过程。 在css中通过float属性来定义浮动。 属性值 描述 Left 元素向左浮动。 Right 元素向右浮动。 None 默认值，元素不动，显示在文本出现的位置。 我们用一个简单的示例来了解float的用法： 我们先设置...
CSS设置元素浮动--03
xym222的博客
09-01 1848
1、元素浮动–float属性 通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用 float 属性来设置元素的浮动， 可选值： none 默认值 ，元素不浮动 left 元素向左浮动 right 元素向右浮动 注意： 元素设置浮动以后，水平布局的等式便不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置， 所以元素下边的还在文档流中的元素会自动向上移动 浮动的特点： 浮动元素会完全脱离文档流，不再占据文档流中的位置 设置浮动以后元素会向父元素的左侧或右侧移动 浮动元素默
CSS中元素内容的浮动属性float
张波的技术积累
01-09 1625
在网页中使用浮动属性，可以更改块元素的默认显示方式，将原本换行显示的块元素同行显示，通过使用浮动元素和盒模型中的各种属性，可以对各种页面元素进行布局。  1. 元素的浮动属性float      用来定义块元素的浮动方式，在浮动属性中，可以使用4种属性值，分别为static，absolute，fixed和relative，        float: none | left | right
CSS 关于浮动
09-25
`left`和`right`分别将元素浮动到左侧或右侧，`none`则取消元素的浮动，`inherit`则使元素继承其父元素的`float`值。 浮动的一个关键特性是，即使元素浮动了，它仍然参与页面流，与其他非浮动元素相互影响。相比之...
CSS 清除浮动Clear
09-25
在CSS布局中，浮动（Float）是一个非常关键的概念，它允许元素脱离标准文档流并沿着指定的方向（通常为左右）浮动，以便在同一行内排列多个块级元素。当我们提到“CSS 清除浮动Clear”时，我们实际上是在讨论如何...
CSS清除浮动使父级元素展开的三个方法
09-25
在CSS布局中，浮动元素（使用`float:left`或`float:right`）常常用于创建多列布局或文本环绕效果。然而，这样的浮动元素会导致其父级元素无法正确地包裹它们，因为浮动元素不再影响流中的其他元素。这个问题被称为...
CSS 常用样式浮动属性
猿码互联
10-12 500
一、概述一、概述CSS 中，浮动属性的作用是让元素向左或向右浮动，使其他元素围绕它排布，常用的浮动属性有以下几种：使元素向左浮动，其他元素从右侧包围它。使元素向右浮动，其他元素从左侧包围它。取消元素的浮动状态。浮动属性常用于网页布局中，可以使元素实现多栏布局、文字环绕图片等效果。需要注意的是，浮动元素会脱离文档流，可能会影响页面其他元素的布局，需要使用 clear 属性清除浮动影响。同时，如果浮动的元素宽度超过了父元素宽度，需要设置 overflow:hidden;
CSS 浮动属性讲解和使用
m0_57301042的博客
11-11 777
CSS 浮动属性的讲解与使用
CSS浮动讲解
最新发布
m0_73593563的博客
01-29 1085
例如：将div2添加左浮动，就会发现div3变矮了，其实是div2脱离了标准流，div1，div3，div4还在标准流里，所以他们自上而下依次排列，div3向上移动占据了div2的位置，重新形成了一个标准流。同理，div2，div3浮动，不在属于标准流，div4会向上移动与div1重新形成一个标准流，由于设置的是右浮动，页面右边为头，所以从左往右来说 div2会排列在div3后面。从图中不难看出即使div1和div2宽度完全可以在一行内承载得下，但div2也不会排在div1后面，这就是标准流中的div。
CSS浮动布局
weixin_43350001的博客
02-03 758
CSS浮动布局文档流简介1、正常文档流2、脱离文档流浮动 文档流简介 什么叫“文档流”？简单来说，就是指元素在页面中出现的先后顺序。可分为“正常文档流”和“脱离文档流”。 1、正常文档流 正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。正常文档流的简单定义是：“正常文档流，将一个页面从上到下分为一行一行的，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”即，正常文档流指的就是默认情况下页面元素的布局情况。 如div、p、hr都是块元素
CSS之float浮动布局
o_535Ovo的博客
09-28 716
css之float浮动布局 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 1. 浮动示例 如下图，把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 再请看下图，当框 1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2从视图中消失。 如果把所有三个框都向左移动，那
【CSS】浮动 ④ ( 浮动布局案例 - 电商布局模块 | 案例分析 | 布局测量摆放 | 浮动布局代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-22 813
一、案例效果 二、案例分析 三、布局测量摆放 四、完整摆放效果
CSS布局（定位、浮动）
li17835756262的博客
09-18 871
（2）父元素宽度如果不够， 例如不能放下一个子元素4， 那么子元素4在贴边时， 会跳过上一个子元素3， 向更上一个子元素2进行贴边， 如果子元素2后面位置不够， 继续跳过子元素2向前面的子元素1进行贴边。（3）如果子元素4在跳过子元素3向更前面的子元素2贴边时， 子元素2的高度不高于子元素3， 子元素2没有延伸出一个高度的边让子元素4贴边， 那么子元素4就会跳过子元素2向子元素1进行贴边。性质： 固定定位的元素脱离标准流， 让出标准流位置， 可以设置宽高， 根据偏移量属性可以任意设置在浏览器窗口的位置。
css的浮动属性
J666_0的博客
09-26 1015
css浮动的语法及特性
前端学习 css（5）圆角边框，盒子阴影，文字阴影，浮动布局
Flyoungbuhu的博客
09-15 354
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框。语法：选择器 { float：属性值；none元素不浮动left元素向左浮动right元素向右浮动。
前端进阶：CSS元素、定位与浮动详解
"深入理解CSS元素、定位与浮动的理论及应用" 在前端开发中，CSS（Cascading Style Sheets）是用于控制网页元素样式的重要工具。本课程将深入讲解CSS中的元素分类、定位机制以及浮动原理，帮助你提升前端布局能力。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值