CSS笔记4-元素的浮动、高度坍塌

芝奥小婷

已于 2024-10-24 09:39:55 修改

阅读量422

点赞数 5

文章标签： css 笔记前端 1024程序员节

于 2024-07-22 20:01:51 首次发布

本文链接：https://blog.csdn.net/weixin_70903041/article/details/140593979

版权

元素的浮动

通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用 float 属性来设置于元素的浮动

浮动的特点:

1. 浮动元素脱离文档流,可以向左或向右移动, 属性

float: 可选值

-none: 不浮动

-left: 向左浮动

-right:向右浮动

2. 浮动元素不会超过父元素的边框

3. 元素一旦设置浮动,下面还没有设置浮动的兄弟元素会向上移动

4. 浮动元素的哥哥如果没有设置浮动,那么该浮动元素不会浮动到哥哥的左右

如果哥哥也设置了浮动,那么该元素最多和哥哥一样高.

5. 浮动元素不再满足水平布局的强制成立等式.

<head>
    <meta charset="UTF-8">
    <title>浮动的特点</title>
    <style>
        #outer{
            width: 800px;
            height: 600px;
            background-color: aqua;
            margin: 0 auto;
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: blue;
            float: right;
        }
        .box2{
            background-color: orange;
            float: left;
        }
        .box3{
            background-color: silver;
            float: left;
        }

    </style>

</head>

<body>
    <div id="outer">
        <div class="box1">你好中国！</div>
        <div class="box2"></div>
         <div class="box3"></div>
    </div>


</body>

浮动元素的其他特点

<head>

    <meta charset="UTF-8">

    <title>浮动元素的其他特点</title>

    <style>

        .box1{

            /* 浮动的块元素的宽和高默认情况下是被内容撑起来的,当然也可以设置具体的宽高 */

            width: 100px;

            height: 100px;

            background-color: olive;



            /* 因为设置了浮动所以居中失效 */

            /* margin: 0 auto; */

            float: left;

            /* 设置浮动之后,可以看到p段落里的文字是环绕着div的,并没有被div覆盖 */

        }

        span{

            float: left;

            width: 300px;

            height: 50px;

            border: 1px solid red;

            line-height: 50px;

        }

    </style>

</head>

<body>

    <div class="box1">你好,我是lily</div>

    <p>床前明月光，疑是地上霜，举头望明月，低头思故乡。</p>

    <div class="box2">abcdefghijklmn</div>

    <span>我是一个span</span>

</body>

高度坍塌问题

高度塌陷的问题：
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。

解决父元素的高度坍塌问题有以下四种方式,第四种是最优解.

1.设置父元素的高度,但是违背了父元素的高度让子元素撑起来的意愿.

2.设置父元素的属性overflow:hidden. 原理使用了BFC概念.

3.在最后一个浮动的子元素后面添加一个空的div并给该元素添加属性

clear:both,该方式,添加了一个不该存在的div,代码冗余

4.使用父元素的伪元素选择器解决问题.

<head>
    <meta charset="UTF-8">
    <title>高度坍塌问题的演示</title>
    <style>      
        #outer{
            border: 1px solid red;
            width: 600px;
            margin: 0 auto;
            /* 高度没有设置,是让子元素将高度撑起来 */
        }

        /* 使用第四种方式,解决高度坍塌问题. 在父元素中内容的最后添加一个伪元素来实现*/
        #outer::after{
            /* 在父元素的内容区的最后插入一个空字符串,因为有文字,应该会在环绕浮动的子元素周围 */
            content: "";
            /* 将不存在的这个伪元素设置成具有块元素的样式 */
            display: block;
            /* 清除伪元素两侧的浮动效果 */
            clear: both;
        }

        #inner{
            border: 1px solid blue;
            height: 300px;
            width: 300px;

            /* 设置了浮动效果,那么父元素的高度就不会被子元素撑起来了,会出现坍塌问题 */
            float: left;
        }

    </style>

</head>
<body>
    <div id="outer">
        <div id="inner">

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

clearfix

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响

clear
作用：清除浮动元素对当前元素所产生的影响
可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧

原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            background-color: salmon;
            /* border: 1px solid blue; */
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: seagreen;
            margin-top: 30px;
            float: left;
        }
        
        /*解决高度塌陷问题*/
        /* .box1::after{
            content: "";
            display: block;
            clear:both;
        } */
        .clearfix{
            content:"";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>