css浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

在 CSS 中，我们通过 float 属性实现元素的浮动

以代码演示示例为主

不加浮动时的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #daHe{
            width: 100px;
            height: 100px;
            background: #000033;

        }
        #xiaoHe{
            width: 100px;
            height: 100px;
            background: #3388ff;
        }

    </style>

 

</head>
<body>
<div id="daHe"></div>
<div id="xiaoHe"></div>

</body>
</html>

 


给蓝色盒子加了浮动之后的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #daHe{
            width: 100px;
            height: 100px;
            background: #000033;

        }
        #xiaoHe{
            width: 100px;
            height: 100px;
            background: #3388ff;
            float: right;
        }

    </style>
</head>
<body>
<div id="daHe"></div>
<div id="xiaoHe"></div>

</body>
</html>

 给黑色盒子加浮动之后的效果

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #daHe{
            width: 100px;
            height: 100px;
            background: #000033;
            float: right;

        }
        #xiaoHe{
            width: 100px;
            height: 100px;
            background: #3388ff;

        }

    </style>
</head>
<body>
<div id="daHe"></div>
<div id="xiaoHe"></div>

</body>
</html>

 然后我们会发现黑色盒子浮动到了右边，但是蓝色盒子就直接上移到了原先黑色盒子的位置。

二、浮动定位的基本规则

1、当元素的float属性取值为left或right时，元素属于浮动定位;
2、若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动；
3、浮动盒子的顶边不得高于上一个盒子的顶边；
4、浮动盒子在摆放时，要避开常规流盒子；常规流盒子在摆放时，无视浮动盒子；
5、常规流盒子的自动高度计算时，无视浮动盒子
6、清除浮动：clear:both(左或右)。

 

posted @ 2021-11-14 16:40  孤傲白狼  阅读(68)  评论(0)    收藏  举报