浮动float的特点

NehzUs

已于 2022-06-27 20:24:21 修改

阅读量181

点赞数

文章标签： css

于 2022-04-14 21:20:42 首次发布

本文链接：https://blog.csdn.net/m0_62903673/article/details/124182028

版权

1. 所有的标签同排显示。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            background-color: cyan;
            margin: 0 auto;
        }
        div p{
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 2px;
        }
    </style>
<body>
    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

结果如下：

接下来，给每个标签使用float：left

结果如下：

我们发现，使用过浮动的p标签，全部通同排显示。

2. 使用过浮动的行标签支持所有css样式。

由上述例子我们可以发现，使用过浮动的p标签css样式还存在。

3. 默认内容撑开宽高。

<style>    
    div p{
            background-color: red;
            margin-top: 2px;
        }
</style>

<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>5</p>
        <p>4</p>
    </div>
</body>

结果如下：

4. 元素脱离文档流。

元素脱离文档流是指，使用过浮动的子级的原来位置会被后面的元素占用。

<style> 
        div p:nth-of-type(2) {
            background-color: yellow;
            float: right;
        }
</style>

<body>
    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

结果如下：