CSS-定位4-浮动

1、浮动的概述

(1)、浮动脱离文档流,浮动的框可以向左或右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
(2)、浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

2、文字环绕效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-浮动</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1{
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
        }
        .div2{
            width: 100px;
            background: red;
        }
        .div3{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <p class="div2">通过示例代码测试浮动效果</p>
    <div class="div3">3</div>
</body>
</html>

显示效果如下,div1浮动脱离文档流,div2占据div1的位置,div1相当于div2的行内元素,由于div2的宽度和div1相同,高度是自动的,因此div2的文字显示在div1的下方。

脱离文档流

文字环绕
将上述代码中的div2的宽宽设置成125px,效果如下。文字会环绕div进行显示。

文字环绕

高度塌陷
将上述代码中的div2的宽宽设置成125px,文字修改成2,效果如下。由于div1浮动脱离文档流,因此高度塌陷,div3会有部分显示,会被div1遮挡。
高度塌陷

文字溢出
将上述代码中的div2的高度成100px,文字将会溢出,显示在div3中。
文字溢出

总结
浮动后,可以把div1看成div2的行内元素,也许很多现象也许就好理解多了。

上一篇:百度大脑5.0发布,宣布与华为重要合作,全新AI芯片「鸿鹄」面世


下一篇:css定位机制