【CSS】【overflow】css中的float属性

最新推荐文章于 2024-08-10 12:02:24 发布

ByteFlys

最新推荐文章于 2024-08-10 12:02:24 发布

阅读量383

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u013718730/article/details/89449294

版权

javascript 专栏收录该内容

107 篇文章 6 订阅

订阅专栏

?css中的float属性，用于控制元素的浮动方向
float有none，left，right，inherit四个取值

?先来看看以下布局：


    <body>
        <div class="container">
            <div class="block1">A</div>
            <div class="block2">B</div>
            <div class="block3">C</div>
        </div>
    </body>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 50px;
            width: 200px;
            height: 150px;
            background: yellow;
            border: 2px solid red;
        }

        .block1 {
            width: 50px;
            height: 50px;
            background: orange;
            text-align: left;
        }

        .block2 {
            width: 50px;
            height: 50px;
            background: greenyellow;
            text-align: center;
        }

        .block3 {
            width: 50px;
            height: 50px;
            background: deepskyblue;
            text-align: right;
        }
    </style>

显示效果如下：
在这里插入图片描述

?给A设置浮动属性，让A浮动到父容器右侧


        .block1 {
            width: 50px;
            height: 50px;
            background: orange;
            text-align: left;
            float: right;
        }

在这里插入图片描述
可以看出，浮动后的元素，不再占据父容器的空间

?修改float属性，让元素向左浮动，并将A宽度调小一点，方便观察效果


        .block1 {
            width: 40px;
            height: 50px;
            background: orange;
            text-align: left;
            float: left;
        }

在这里插入图片描述
可以看到，A浮动后，B移动到了A留下的空间，但是B里面包含的文字并没有移过去，而是显示在A的下面
浮动元素不会影响块级元素布局，但是会影响内联元素布局，最常见的就是影响文本位置

?改变ABC的大小，让它们全部向左浮动，观察运行效果


    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 50px;
            width: 200px;
            height: 150px;
            background: yellow;
            border: 2px solid red;
        }

        .block1 {
            width: 50px;
            height: 80px;
            background: orange;
            text-align: left;
            float: left;
        }

        .block2 {
            width: 150px;
            height: 50px;
            background: greenyellow;
            text-align: center;
            float: left;
        }

        .block3 {
            width: 70px;
            height: 100px;
            background: deepskyblue;
            text-align: right;
            float: left;
        }
    </style>

在这里插入图片描述
可以看出，float元素之间，是按照从左向右，从上到下的顺序，找到空间就摆放在当前位置

?按照同样的方法，让所有元素全部向右浮动
在这里插入图片描述
这次就是按照从右到左，从上到下的顺序摆放

?删除B和C元素，让A浮动，不设置父容器宽高，观察运行结果


    <body>
        <div class="container">
            <div class="block1">A</div>
        </div>
    </body>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 50px;
            width: 300px;
            background: yellow;
            border: 1px solid red;
        }

        .block1 {
            width: 50px;
            height: 80px;
            background: orange;
            text-align: left;
            float: left;
        }
    </style>

在这里插入图片描述
由于浮动元素不占据空间，当父容器只有一个浮动元素作为子节点时，默认高度就为0，这个现象叫做【高度塌陷】

?如果我们想父容器和浮动元素保持一样的高度，有两种方法：
一种是增加一个clear=both的空元素来撑大父容器
一种是给父容器设置overflow=auto来让父容器自己改变高度

?clear属性规定元素的哪一侧不允许其他浮动元素
clear属性有left，right，both，inherit几种取值
当不允许悬浮的一侧，有悬浮元素存在时，元素就会换行显示到浮动元素下面

?利用clear元素的这种特性，我们在浮动元素下面，添加一个clear=both的空元素，这个空元素就会撑起父容器的高度


    <body>
        <div class="container">
            <div class="block1">A</div>
            <div class="block2">B</div>
        </div>
    </body>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 50px;
            width: 300px;
            background: yellow;
            border: 1px solid red;
        }

        .block1 {
            width: 50px;
            height: 80px;
            background: orange;
            text-align: left;
            float: right;
        }

        .block2 {
            background: greenyellow;
            clear: both;
        }
    </style>

在这里插入图片描述
?当父容器设置了overflow=auto时，子元素是被视为放在滚动面板里面的，如果父容器未设置高度，默认高度就是和整个内容一样大


    <body>
        <div class="container">
            <div class="block1">A</div>
        </div>
    </body>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 50px;
            width: 300px;
            background: yellow;
            border: 1px solid red;
            overflow: auto;
        }

        .block1 {
            width: 50px;
            height: 80px;
            background: orange;
            text-align: left;
            float: right;
        }
    </style>

在这里插入图片描述
?我们可以对clear=both这种方式进行进一步优化，通过after伪元素来模拟空元素的效果


    <body>
        <div class="container">
            <div class="block1">A</div>
        </div>
    </body>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 50px;
            width: 300px;
            background: yellow;
            border: 1px solid red;
        }

        .block1 {
            width: 50px;
            height: 80px;
            background: orange;
            text-align: left;
            float: left;
        }

        .container:after {
            display: block;
            content: "";
            clear: both;
        }
    </style>

在这里插入图片描述