CSS元素浮动

最新推荐文章于 2024-03-05 11:12:23 发布
原创 最新推荐文章于 2024-03-05 11:12:23 发布 · 318 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
HTML-CSS

当前文章被收录于：

HTML-CSS
21 篇文章 0 人学习

HTML 层叠样式表

订阅专栏 查看详情

一、认识浮动

◼ 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>

五、布局方案总结

在这里插入图片描述

标签
#css #前端
CSS中的浮动布局（Floating Layout）详解及示例代码
2301_79326930的博客
09-27 431
浮动布局是CSS中常用的布局方式，可以实现多列布局和图片环绕效果。通过浮动属性可以控制元素的漂浮方向，而清除浮动可以避免布局紊乱。在实际应用中，可以根据需要灵活运用浮动布局来实现不同的页面布局效果。浮动布局是CSS中一种常用的布局方式，它可以使元素漂浮在其容器中，从而实现多列布局或图片与文本环绕效果。本文将详细介绍CSS中的浮动布局，并提供相应的示例代码。如有任何疑问，请及时提问。这样，容器就能正确计算高度，避免布局紊乱。样式，使其向左浮动，并实现了多列布局的效果。是一个容器元素，内部包含了三个浮动的。
前端基础(十一)_Float浮动、清除浮动的几种方法
见贤思齐焉，见不贤内自省
12-16 1727
Float浮动、清除浮动的几种方法
超详细的学习笔记：CSS浮动（附代码示例）
lbcbjtlhmjq的博客
07-13 1291
一、结构伪类选择器 二、伪元素 三、标准流 四、浮动 五、清除浮动 六、CSS书写顺序 七、代码示例
前端学习 css（5）圆角边框，盒子阴影，文字阴影，浮动布局
Flyoungbuhu的博客
09-15 735
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框。语法：选择器 { float：属性值；none元素不浮动left元素向左浮动right元素向右浮动。
元素的浮动
qq_42000660的博客
07-15 1131
1、浮动元素会脱离网页文档,与其他元素发生重叠但是，不会与文字内容发生重叠，如下面案例： 1)通过元素的浮动，可以生成文字浮动的效果 代码： <style type="text/css"> .d1{ height: 200px; width: 200px; background-color: red; float: left; } .d2{ height: 300px; width: 500px; background-color: sky...
CSS之父元素包含浮动子元素
shandamengcheng的博客
09-20 1331
CSS之父元素包含浮动子元素 #third { width: 500px; float: left; background: orange; height: 500px; } #forth { width: 400px; h...
html 浮动后居中,css如何让浮动元素水平居中
weixin_28465009的博客
06-14 5725
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助到大家。方法一：1、HTML 部分：我是浮动的我也是居中的2、CSS 部分：.box{float:left;position:relative;left:50%;}p{float:l...
CSS之float浮动元素定位机制
爆爆爆炸beng
10-12 2255
1 .6个子容器未设置浮动的状态如下 &lt;div&gt; &lt;span class="one"&gt;子容器1&lt;/span&gt; &lt;span class="two"&gt;子容器2&lt;/span&gt; 水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水 水水水水水水水水水水水水水水水水水水
HTML + CSS 连载 | 58 - CSS 元素浮动
JingnanJia的博客
03-05 1092
属性最初只用于在一段文本内浮动图像，实现文字环绕的效果，由于早期的 CSS 标准中并没有提供好的。后会朝左或者朝右移动，直到自己的边界紧贴着包含块（一般是指父元素）或者其他浮动元素的。如果元素是向左（右）浮动，浮动元素的左（右）边界不能超过包含块的左（右）边界。，由于定位元素也是脱离标准流的，定位元素会层叠在浮动元素上面。上，这就是定位和浮动的区别，浮动是会紧贴着。与绝对定位一样，浮动也会让元素脱离标准流。的定位并再取消浮动的注释，同时给。拷贝上一个 HTML 文件，并给。放置，允许文本和内联元素环绕它。
css元素的浮动、定位
赵佳敏的博客
10-28 918
一、元素浮动 1.float属性 float：左浮动或者右浮动 元素浮动之后，不会影响前面的元素，会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，但是会导致后边元素的重排。 浮动元素会脱离正常文档流，即浮动元素不占位置。 .box{ width: 100px; height: 100px; background-color: sienna; border: 1px solid red; float: left; } <p>我是前.
html div元素浮动,CSS实现元素浮动和清除浮动的方法
weixin_33417371的博客
06-10 1314
浮动基本介绍在标准文档流中元素分为2种，块级元素和行内元素，如果想让一些元素既要有块级元素的特点也同时保留行内元素特点，只能让这些元素脱离标准文档流即可。浮动可以让元素脱离标准文档流，可以实现让多个元素排在同一行，并且可以设置宽高度。其实浮动是通过float属性来实现的。float属性值说明表：属性值描述left设置元素向左浮动。right设置元素向右浮动。右浮动实践让我们进入右浮动的实践，实践内...
关于CSS中的元素浮动
qq_43654065的博客
09-04 494
文档流 指盒子按照HTML标签编写的顺序依次从上到下、从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写得先排列，后写的后排列，每个盒子都占据自己的位置。 浮动特性 浮动元素有左浮动（float：left）和右浮动（float：right）两种； 浮动的元素会脱离文档流向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来； 相邻浮动的块元素可以并在一行，超出父级宽度就换行； 浮动让行内元素或块元素自动转化为行内块元素； 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素
CSS--浮动元素
mvvm实现原理
01-20 1142
虽然css浮动是每个fe都认为烂熟于心的知识点，但实际上本文出现的4个demo，我问了身边的几个同事，都会出现错误的判断，可见css知识看似容易理解，但很多小细节都容易忽略。本文将复习css的浮动元素，主要讲解浮动元素的概念，特点，以及如何消除浮动。以4个demo来理解浮动元素的特点。 浮动float 浮动元素是指元素脱离了常规流，向左/右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 ...
CSS 浮动元素
jcf52的博客
04-21 1023
在 CSS 中，任何元素都可以浮动。 浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动 一.clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素 right...
HTML CSS元素浮动
HTML5_student的博客
02-22 1052
前端页面设计元素浮动是会经常用到的，今天简单的整理一下在 逆战班 学到的浮动知识点。 CSS元素浮动：使块元素在页面中水平排列，脱离文档流。 使用float来使元素浮动，从而脱离文档流 可选值 1.left 元素立即脱离文档流 向页面左侧浮动 2.right元素立即脱离文档流 向页面右侧浮动 3.none默认 在文档流中排列 当为一个元素设置浮动以后非none，元素立即脱离文档流，它下边的元素会立...
css之元素浮动
weixin_30466039的博客
07-19 155
　　什么时候用浮动——块级元素一行显示就使用浮动 　　浮动的特点——让元素脱标不占位置 　　什么时候清除浮动——父元素没有设置高度；父元素中所有的子元素都设置浮动 清除浮动的方法(掌握)： 1.额外标签清除浮动 　　步骤:（1）在浮动元素后直接添加一个空div标签；（2）选中该div标签设置属性clear: both; 2.单伪元素清除浮动[推荐使用] .clearfix:...
CSS浮动与定位、块级元素与内联元素
橘猫吃不胖的博客
10-21 2396
CSS浮动与定位、块级元素与内联元素 1 DIV的概念 2 页面布局步骤 3 CSS的定位机制 4 浮动属性 4.1 浮动的含义 4.2 浮动的实现 4.3 常见的浮动布局 4.4 清除浮动 5 定位属性position 5.1 相对定位relative 5.2 绝对定位absolute、fixed 6 visibility、display 7 块级元素与内联元素 7.1 块级元素 7.2 内联元素 7.2.1 内联盒模型 7.2.2 幽灵空白节点
CSS清除浮动-双伪元素
m0_46744635的博客
08-17 764
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS清除浮动-双伪元素</title> <style> .clearfix:before,.c.
CSS基础学习-float浮动、块级元素、行内元素
hirak0的博客
07-22 1222
CSS基础学习-float浮动、块级元素、行内元素 float(浮动) CSS 的float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 如果图像是右浮动，下面的文本流将环绕在它左边： img { float
CSS day7 元素的浮动布局
qq_34620296的博客
08-18 202
1.浮动元素会脱离网页文档,与其他元素发生重叠,但是不会与文字或图片重叠 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值