css 浮动 float 02-浮动的其他特点

@Linnc

已于 2022-07-11 17:48:40 修改

阅读量167

点赞数

文章标签： css html css3

于 2022-07-11 17:45:33 首次发布

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

版权

css 浮动 float 02-特点

1.浮动的元素不会盖住文字

浮动的元素不会盖住文字，文字会在浮动的元素周围环绕

代码1：

<head>
	<meta charset="UTF-8">
    <title>floatTest</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: brown;
            
            float: left; /*开启浮动*/
        }
    </style>
</head>



<body>
	<div class="box1"></div>
	<p>《这里是一堆文字》...省略很多文字...《这里是一堆文字》》</p>
</body>

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

2.元素开启浮动脱离文档流及脱离文档流后的特点

块元素：

		1. 块元素不再独占一行
		2. 未设置宽高的情况下，宽高被内容撑开

代码2：

<head>
	<meta charset="UTF-8">
    <title>floatTest</title>

    <style>
    	*{
    		margin: 0;
        	padding: 0;
    	}

    	.box1{
    		background-color: brown;
    		float: left;
    	}

    </style>

</head>


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

运行效果：

在这里插入图片描述

行内元素：

脱离文档流之后具有了块元素的特点，可以设置宽高

<head>
	<meta charset="UTF-8">
    <title>floatTest</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: brown;

            float: left;
        }


    </style>

	</head>


	<body>

        <span class="box1">hello</span>
            
	</body>


    </style>

	</head>


	<body>

        <span class="box1">hello</span>
            
	</body>