浮动的简介——CSS

_洋

已于 2022-05-02 09:52:45 修改

阅读量364

点赞数 1

分类专栏： HTML+CSS 文章标签： css3

于 2022-04-11 19:52:05 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124103109

版权

HTML+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

作用
使用
浮动修改盒子模型水平布局
设置float之后或从文档流中脱离
浮动的特点
浮动目的总结:

作用

通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用 float属性来设置于元素的浮动

使用

float的可选值:

none默认值，元素不浮动
left 元素向左浮动
right元素向右浮动
eg：

      .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(235, 180, 180);
            float: right;
        }

在这里插入图片描述

浮动修改盒子模型水平布局

注意：元素设置浮动以后，水平布局的等式（mangin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度）便不需要强制成立，写多少就是多少。
eg：设置浮动前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(235, 180, 180);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述
设置： float: left;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(235, 180, 180);
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

设置float之后或从文档流中脱离

按上面的思路，如果再设置一个box2,那么box2就会在box1的右边，而不是下面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(235, 180, 180);
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:rgb(219, 243, 154);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
     <div class="box2"></div>
</body>
</html>

但是结果却是：
在这里插入图片描述
box2不是消失不见而是被box1遮住了，这是因为：
元素设置浮动以后,会完全从文档流中脱离，不再占用文档流的位置，此时还在文档流中的元素会自动向上移动。box2就移动到了box1之前的位置，box1又脱离文档流，在文档流的上面，所以box1就会覆盖box2。
如果想要设置两个div在同一行并列排序，只需要两个都设置成float：left
eg：

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(235, 180, 180);
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:rgb(243, 242, 154);
            float: left;
        }
    </style>
    <script>
     
    </script>
</head>
<body>
    <div class="box1"></div>
     <div class="box2"></div>
</body>
</html>

输出：
在这里插入图片描述

浮动的特点

1、浮动元素会完全脱离文档流，不再占据文档流中的位置

2、设置浮动以后元素会向父元素的左侧或右侧移动，并且浮动元素默认不会从父元素中移出

3、浮动元素只能左右移动，只是如果放不下会换行。

4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。（横向特点）

5、浮动元素不会超过在它前面先浮动的兄弟元素,最多就是和它一样高。（纵向特点）

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 400px;
            height: 200px;
            background-color: rgb(235, 180, 180);
            float: left;
        }
        .box2{
            width: 400px;
            height: 200px;
            background-color:rgb(243, 242, 154);
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color:rgb(164, 243, 154);
            float: right;
        }
    </style>
    <script>
     
    </script>
</head>
<body>
    <div class="box1"></div>
     <div class="box2"></div>
     <div class="box3"></div>
</body>
</html>

在这里插入图片描述

6、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移，只能在下一行开始浮动。

（不是想在哪浮动就在哪浮动的）
就是说，如果块元素先定义，块元素上不能浮动元素；但是如果浮动元素先定义，浮动元素下面还可以在放块元素。
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="reset.css">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(235, 180, 180);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:rgb(243, 242, 154);
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color:rgb(164, 243, 154);
            float: right;
        }
        .box4{
            width:400px;
            height: 400px;
            background-color: rgb(180, 186, 235);
        }
    </style>

</head>
<body>
     <div class="box1">未浮动的块元素</div>
     <div class="box2">浮动的块元素</div>
     <div class="box3">浮动的块元素</div>
     <div class="box4"><p>未浮动的块元素</p></div>
</body>
</html>

在这里插入图片描述
这里发现box4的文字没有被浮动元素遮住，这就引入了浮动的另一个特点。

7、浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围,我们可以利用浮动来设置文字环绕图片的效果。

（其实这是浮动设计的最初目的）
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    .box1{
    width: 200px;
    height: 200px;
    background-color: rgb(235, 180, 180);
    float: left;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>。所谓回忆者，虽说可以使人欢欣，有时也不免使人寂寞，使精神的丝缕还牵着已逝的寂寞的时光，又有什么意味呢，而我偏苦于不能全忘却，这不能全忘的一部分，到现在便成了《呐喊》的来由。”“我感到未尝经验的无聊，是自此以后的事。我当初是不知其所以然的;后来想，凡有一人的主张，得了赞和，是促其前进的，得了反对，是促其奋斗的，独有叫喊于生人中，而生人并无反应，既非赞同，也无反对，如置身毫无边际的荒原，无可措手的了，这是怎样的悲哀呵，我于是以我所感到者为寂寞。”“是的，我虽然自有我的确信，然而说到希望，却是不能抹杀的，因为希望是在于将来，决不能以我之必无的证明，来折服了他之所谓可有，于是我终于答应他也做文章了，这便是最初的一篇《狂人日记》。”“在我自己，本以为现在是已经并非一个切迫而不能已于言的人了，但或者也还未能忘怀于当日自己的寂寞的悲哀罢，所以有时候仍不免呐喊几声，聊以慰藉那在寂寞里奔驰的猛士，使他不惮于前驱。至于我的喊声是勇猛或是悲哀，是可憎或是可笑，那倒是不暇顾及的;但既然是呐喊，则当然须听将令的了，所以我往往不恤用了曲笔，在《药》的瑜儿的坟上平空添上一个花环，在《明天》里也不叙单四嫂子竟没有做到看见儿子的梦，因为那时的主将是不主张消极的。至于自己，却也并不愿将自以为苦的寂寞，再来传染给也如我那年青时候似的正做着好梦的青年。”</p>
</body>
</html>

在这里插入图片描述

即使文字所在的容器被浮动元素完全盖住，容器中的文字也会环绕在浮动元素周围。
eg：
没有设置浮动元素之前：
在这里插入图片描述
设置浮动元素之后：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="reset.css">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(235, 180, 180);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:rgb(243, 242, 154);
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color:rgb(164, 243, 154);
            float: right;
        }
        .box4{
            width:200px;
            height: 200px;
            background-color: rgb(180, 186, 235);
        }
    </style>

</head>
<body>
     <div class="box1">未浮动的块元素</div>
     <div class="box2">浮动的块元素</div>
     <!-- <div class="box3">浮动的块元素</div> -->
     <div class="box4"><span>未浮动的块元素</span></div>
</body>
</html>

8.浮动后（脱离文档流后）元素的特点

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化。
下面的是脱离文档流的特点，只要脱离文档流就会有的特点，不一定是浮动才有的。

块元素:

1、块元素不再独占页面的一行
2、如果没有设置宽度和高度，脱离文档流以后,块元素的宽度和高度默认都被内容撑开
3、如果设置了宽度和高度，就按设置的来。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            background-color: rgb(255, 242, 125);
            float: left;
        }
        .box2{
            background-color: salmon;
        }
        .box3{
            background-color: rgb(155, 181, 236);
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">hello我是浮动元素1</div>
     <div class="box3">hello我是浮动元素2</div>
      <div class="box2">hello我是未浮动元素</div>
    
</body>
</html>

输出：
在这里插入图片描述

行内元素

行内元素脱离文档流以后会变成块元素，特点和块元素一样。
脱离文档流以后，不需要再区分块和行内了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span{
            width: 100px;
            height: 100px;
            background-color: thistle;
            float: left;
        }
    </style>
</head>
<body>
    <span>我是浮动后的行内元素</span>
    
</body>
</html>

在这里插入图片描述

浮动目的总结:

浮动主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。

_洋

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浮动的简介——CSS

文章目录作用使用浮动修改盒子模型水平布局设置float之后或从文档流中脱离浮动的特点作用通过浮动可以使一个元素向其父元素的左侧或右侧移动使用 float属性来设置于元素的浮动使用float的可选值:none默认值，元素不浮动left 元素向左浮动right元素向右浮动eg： .box1{ width: 200px; height: 200px; background-color: rgb(235, 18
复制链接

扫一扫

专栏目录