浮动简介：

最新推荐文章于 2024-10-09 09:17:59 发布

a i o o 7

最新推荐文章于 2024-10-09 09:17:59 发布

阅读量70

点赞数

分类专栏： css 文章标签： css html Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_52808469/article/details/129323534

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了浮动在CSS中的作用，如何设置浮动样式，如`float:left`和`float:right`，以及浮动元素的特点，包括脱离文档流、文字环绕等。通过示例展示了浮动对元素布局的影响，特别是块元素和行内元素的变化，强调了浮动后不再区分元素类型。

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

1、什么是浮动？

浮动可以让元素脱离文档流，一旦脱离文档流，就不再具有元素再文档流中的特点从而帮助我们布局。

2、设置浮动样式名：float:;

float:right;设置右浮动
float:left;设置左浮动
float:none;不浮动，默认样式

3、浮动特点：

一旦元素设置浮动，元素就会脱离文档流，他原来在文档流中的元素就不会存在了。

元素浮动以后元素会向页面的左上或者页面的右上浮动

浮动元素默认情况下不会从其父元素中移出

浮动的元素不会超过其上边的兄弟元素

如果浮动元素的前一个元素没有设置浮动则浮动元素无法上移

<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #box {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 50px auto;
      }
      .box4{
        width: 100px;
        height: 100px;
        background-color: aqua;
        /* float: none; */
        /* display: inline-block; */
      }
      .box1{
        background-color: red;
        float: left;

      }
      .box2{
        background-color: green;
        width: 150px;
        height: 150px;
        float: left;
      }

    </style>
  </head>
  <body>
    <div id="box">
      <div class="box1 box4"></div>
      <div class="box2 box4"></div>
      <div class="box3 box4"></div>
    </div>
  </body>
</html>

4、浮动与文字的位置关系

当浮动的元素碰到文字，浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围。可以通过此浮动来设置文字环绕效果。

5、浮动以后元素的变化

当元素设置浮动后，会完全脱离文档流，元素的一些特点也会发生改变。