AI 助理
备案控制台
开发者社区 云原生 文章 正文

CSS浮动

2022-06-06 148
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS浮动 浮动主要用于使得div脱离标准文档流，生成多列布局，浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素），浮动元素支持所有的css样式 、内容撑开宽高 、多个元素设置浮动，宽度足够的话，会排在一行 、脱离文档流 、提升层级半级

浮动的特性


1.浮动主要用于使得div脱离标准文档流，生成多列布局


2.浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）


3.浮动元素支持所有的css样式 、内容撑开宽高 、多个元素设置浮动，宽度足够的话，会排在一行 、脱离文档流 、提升层级半级（也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围）。


注意：不管是行级还是块级元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素。


float属性

属性

 说明
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动


下面我们用三个div来设置不同情况的div浮动来通过例子来理解float以及overflow。


三个div都不浮动


样例代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .class1 {
        width: 200px;
        height: 100px;
        background: palegreen;
      }
      .class2 {
        width: 250px;
        height: 130px;
        background: gold;
      }
      .class3 {
        width: 300px;
        height: 180px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="class1">我是块级元素1，没有设置浮动</div>
    <div class="class2">我是块级元素2，没有设置浮动</div>
    <div class="class3">我是块级元素3，没有设置浮动</div>
  </body>
</html>

效果截图：

1.png


在不设置浮动的情况下，三个div块会竖着在一列显示


第一个div浮动


样例代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .class1 {
        width: 200px;
        height: 100px;
        background: palegreen;
        float: left
      }
      .class2 {
        width: 250px;
        height: 130px;
        background: gold;
      }
      .class3 {
        width: 300px;
        height: 180px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="class1">块级元素1，设置浮动</div>
    <div class="class2">块级元素2，没有设置浮动，块级元素2，没有设置浮动，块级元素2，没有设置浮动，块级元素2，没有设置浮动</div>
    <div class="class3">块级元素3，没有设置浮动</div>
  </body>
</html>

效果截图：

1.png


故意将第二个div块中的内容写得多点，我们可以得出下面的结论：

1.没有设置浮动的元素会填充浮动元素留下来的空间

2.浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面

3.使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但文本依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围。


第二个div浮动


样例代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .class1 {
        width: 200px;
        height: 100px;
        background: palegreen;
      }
      .class2 {
        width: 250px;
        height: 130px;
        background: gold;
        float: left
      }
      .class3 {
        width: 300px;
        height: 180px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="class1">块级元素1，没有设置浮动</div>
    <div class="class2">块级元素2，设置浮动</div>
    <div class="class3">块级元素3，没有设置浮动</div>
  </body>
</html>

效果截图：

1.png


由此我们可以很明显的看出：

浮动元素不会超越其前面的元素


三个div都浮动


样例代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .class1 {
        width: 200px;
        height: 100px;
        background: palegreen;
        float: left
      }
      .class2 {
        width: 250px;
        height: 130px;
        background: gold;
        float: left
      }
      .class3 {
        width: 300px;
        height: 180px;
        background: red;
        float: left
      }
    </style>
  </head>
  <body>
    <div class="class1">块级元素1，设置浮动</div>
    <div class="class2">块级元素2，设置浮动</div>
    <div class="class3">块级元素3，设置浮动</div>
  </body>
</html>


效果截图：


浏览器宽度足够时，三个div会并排排列 。

1.png

当我们发大页面时，浏览器宽度不足以容纳最后一个div时，最后一个div掉下来，并且顶部不会超过倒数第二个div的底部。

2.png


浮动的父子关系


样例代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #wrap2 {
        width: 55px;
        height: 90px;
        border: 3px solid red;
      }
      .class1 {
        width: 20px;
        height: 40px;
        background: blue;
        float: left;
      }
      .class2 {
        width: 20px;
        height: 30px;
        background: yellow;
        float: left;
      }
      .class3 {
        width: 20px;
        height: 30px;
        background: fuchsia;
        float: left;
      }
      .class4 {
        width: 20px;
        height: 20px;
        background: chartreuse;
        float: left;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div id="wrap2">
      <div class="class1"></div>
      <div class="class2"></div>
      <div class="class3"></div>
      <div class="class4"></div>
    </div>
  </body>
</html>

效果截图：

1.png


由此我们可以得到下面的结论：


1.浮动元素不会在其浮动方向上溢出父级的包含块 也就是说元素左浮动，其左外边距不会超过父级的左内边距，元素右浮动，其右外边距不会超过父级的右内边距 。


2.浮动元素的位置受到同级同向浮动元素的影响 也就是说同一父级中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，他们不会相互遮挡，后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位，如果当前空间不足，则会换行，否则会放置在前一个浮动元素的下面。


浮动影响父层盒子高度


样例代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #wrap2 {
        width: 55px;
        border: 3px solid red;
      }
      .class1 {
        width: 20px;
        height: 40px;
        background: blue;
        float: left;
      }
      .class2 {
        width: 20px;
        height: 30px;
        background: yellow;
        float: left;
      }
      .class3 {
        width: 20px;
        height: 30px;
        background: fuchsia;
        float: left;
      }
      .class4 {
        width: 20px;
        height: 20px;
        background: chartreuse;
        float: left;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div id="wrap2">
      <div class="class1"></div>
      <div class="class2"></div>
      <div class="class3"></div>
      <div class="class4"></div>
    </div>
  </body>
</html>

效果截图：

1.png


由此我们可以得到下面的结论：

父元素的高度靠子元素撑开，子元素全部浮动后，均脱离文档流，父元素高度塌陷。


overflow属性

overflow属性 说明
visible 默认值。内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容


overflow属性的妙用：

配合着浮动父容器，解决父容器高度他塌陷的问题。

使用overflow扩展盒子高度，overflow属性会触发浏览器重新计算父元素盒子高度。


样例代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #wrap2 {
        width: 55px;
        border: 3px solid red;
        overflow: hidden;
      }
      .class1 {
        width: 20px;
        height: 40px;
        background: blue;
        float: left;
      }
      .class2 {
        width: 20px;
        height: 30px;
        background: yellow;
        float: left;
      }
      .class3 {
        width: 20px;
        height: 30px;
        background: fuchsia;
        float: left;
      }
      .class4 {
        width: 20px;
        height: 20px;
        background: chartreuse;
        float: left;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div id="wrap2">
      <div class="class1"></div>
      <div class="class2"></div>
      <div class="class3"></div>
      <div class="class4"></div>
    </div>
  </body>
</html>

效果截图：

1.png


溢出处理


样例代码：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #d1{
                /* 容器 */
                border: solid 1px red;
                height: 200px;
                width: 150px;
                /* overflow: visible; */
                /* overflow: hidden; */
                /* overflow : scroll; */
                /* overflow: auto; */
                overflow-x: scroll;
            }
            #d2{
                /* 出现移除的内容*/ 
                width: 180px;
                border: solid 2px green;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2">222222</div>
        </div>
    </body>
</html>

效果截图：

1.png


当d2的宽度超过了父级d1的宽度时，我们可以通过设置不同的overflow属性值来实现不同的解决办法，我所演示的是浏览器会显示滚动条以便查看其余内容。


清除浮动

clear属性

说明
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none

默认值，允许浮动元素出现在两侧


样例代码：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .container{
                border: solid 1px blue;
            }
            .class1 {
                width: 200px;
                height: 100px;
                background: palegreen;
                float: left;
            }    
            .class2 {
                width: 250px;
                height: 130px;
                background: gold;
                float: left;
            }
            .class3 {
                width: 300px;
                height: 180px;
                background: red;
                float: left;
            }
            /* .clear{
                clear: both;
            } */
        </style>
    </head>
    <body>
        <div class="container">
            <div class="class1">我是块级元素1</div>
            <div class="class2">我是块级元素2</div>
            <div class="class3">我是块级元素3</div>
            <div class="clear">牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南</div>
        </div>
    </body>
</html>

没有清除两侧浮动效果截图：

1.png

把代码中的这段代码的注释去掉，来清除两侧浮动


/* .clear{
    clear: both;
} */

清除两侧浮动效果截图：

1.png


可以很明显的看出：

清除两侧浮动后，有扩展父级盒子高度的作用


文章标签：
前端开发
容器
关键词：
CSS浮动
牛哄哄的柯南8151
目录
相关文章
程序员小豪
|
5月前
|
前端开发
【前端｜CSS系列第3篇】CSS盒模型、浮动及定位
【前端｜CSS系列第3篇】CSS盒模型、浮动及定位
程序员小豪
92 1
你都不懂
|
3月前
|
前端开发
5.CSS学习（浮动）
【7月更文挑战第29天】
你都不懂
32 4
夏天49597
|
4月前
|
前端开发 容器
CSS基础-浮动：float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性，用于创建多列布局和图文混排，但会导致浮动塌陷和元素重叠问题。为解决这些问题，文章探讨了`clear`属性的四种清除浮动方法，包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起，它们在某些场景下替代了浮动，但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
夏天49597
39 5
小徐在进步
|
21天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍，主要解决多个`&lt;div&gt;`标签在同一行显示的问题，即一个在左边，另一个在右边。文中介绍了标准流、浮动及flex布局的概念，重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法，包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法，并提供了示例代码帮助理解。
小徐在进步
22 6
游客ot6eft3qn37ga
|
2月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动（CSS）
前端面试热门问题--浮动和清除浮动（CSS）
游客ot6eft3qn37ga
47 6
一颗小谷粒
|
3月前
|
前端开发
CSS：浮动
CSS：浮动
一颗小谷粒
26 1
肥晨
|
4月前
|
前端开发 UED 容器
纯CSS画浮动卡通蓝天白云草坪动画效果
【6月更文挑战第1天】网页设计中，通过创新技巧，可以使用HTML和CSS模拟云朵漂浮和草地动画效果，提升用户体验。背景实现采用线性渐变动画，使背景颜色从浅青至白平滑过渡并循环移动。云朵效果通过多个不同大小和位置的`<div>`元素，结合CSS的`position: absolute;`和`@keyframes`动画实现浮动。草的动画则是通过三角形形状及`::before`和`::after`伪元素创造，配合不同动画速度和角度模拟自然摆动。完整代码可在提供的链接中下载。
肥晨
75 1
纯CSS画浮动卡通蓝天白云草坪动画效果
秋刀鱼不做梦
|
4月前
|
前端开发 容器
CSS浮动（如果想知道CSS有关浮动的知识点，那么只看这一篇就足够了！）
CSS浮动（如果想知道CSS有关浮动的知识点，那么只看这一篇就足够了！）
秋刀鱼不做梦
35 4
niceffking
|
5月前
|
人工智能 前端开发 容器
CSS 浮动
CSS 浮动
niceffking
48 1
sky_qiyi
|
4月前
|
前端开发
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
sky_qiyi
40 0