2025-2-2-清除浮动

使用浮动会让父元素也受影响，示例中有父元素不设置高度就不受子元素占据高度的影响，高度为零成一条线的情况出现，同样会让后续元素受到影响，无论会序元素是否在父元素中，后续元素均会被使用浮动元素覆盖

浮动副作用的清除




示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .container {
        width: 500px;
        /*对父元素高度为零的情况，可以手动设置父元素高度来避免*/
        /*height: 500px;*/
        /*在有些时候我们不能够去设置父元素的高度，这时候用overflow来清除浮动，清除后高度为自适应高度*/
        overflow: hidden;
        border: 1px solid red;
    }
    /*在不使用overflow跟指定高度时也可以用伪对象方式*/
    /*.container::after{*/
    /*    content: '';*/
    /*    display: block;*/
    /*    clear: both;*/
    /*}*/
    .box{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 5px;
        float: left;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: blue;
    /*    对受浮动影响的元素，我们用clear来进行浮动的影响清除*/
        clear: both;
    /*    both为全部，也可以用left跟right指定*/
    }
</style>
<body>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box1"></div>
</div>
</body>
</html>

posted @ 2025-02-12 21:07  liu某人  阅读(13)  评论(0)    收藏  举报