css 浮动float 01

最新推荐文章于 2022-07-20 16:32:57 发布

@Linnc

最新推荐文章于 2022-07-20 16:32:57 发布

阅读量170

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_56973829/article/details/125724324

版权

CSS 浮动 float 01

1. 简介

通过设置float属性来设置浮动。设置浮动之后，可以使一个元素向其父元素的左边和右侧浮动，浮动的元素只会在父元素内部浮动而不会飘出父元素，以下为代码说明：

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>floatTest</title>

        <style>
            .box1{
                width: 200px;
                height: 200px;
                background-color: brown;
            }
            .outter
            {
                width: 400px;
                height: 400px;
                background-color: bisque;
            }

            .inner{
                width: 200px;
                height: 200px;
                background-color: blueviolet;
                float: right ; 
            }
        </style>

    </head>


    <body>

        <div class="box1"></div>

        <div class="outter">
            <div class="inner"></div>
        </div>
        
    </body>
</html>

运行结果：

在这里插入图片描述

这里我们可以看到紫色的方块是设置了向右浮动的，但是它没有飘出其父元素，这里我们将父元素去掉再看运行结果：

代码1：

<body>

            <div class="box1"></div>

            <!-- <div class="outter"> -->
            <div class="inner"></div>
            <!-- </div> -->  
</body>

运行结果：
在这里插入图片描述

我们可以看见，没有了父级元素的约束，紫色方块来到了当前父元素(body)的最右侧,这里紫色元素在下一行是因为棕色块在结构上写在紫色块的前边，div是属于块元素，独占一行，我们将在下面补充

现在我们将两者结构上的顺序对调再看结果

代码2：

<body>

    		 <!-- 紫色写在前面 -->  
    		<div class="inner"></div>
    		 <!-- 棕色写在后面 --> 
            <div class="box1"></div>

            <!-- <div class="outter"> -->
            
            <!-- </div> -->    
</body>