[已解决]为何浮动后原位置还被占有位置

Sorawithcat

其中#end为父元素，其余都为子元素。

    

        #end {
            background-color: lightseagreen;
            height: 3000px;
            padding-left: 10px;
            column-count:5;
            column-rule: 2px dashed #ccc;
            column-gap: 5px;
            position:relative;
        }
    .news {
            width: 240px;
            height:auto;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 5px #ccc;
            margin: 10px;
            margin-left:20px;
            break-inside: avoid;
            position:relative;
        }

            .news img {
                position:relative;
                width: 240px;
                display: block;
                height: auto;
            }

        .endwords {
            position: relative;
            bottom: 110px;
            background-color: wheat;
            width: 240px;
            opacity: 0;
            color: black;
            height: 110px;
            text-align:center;
            line-height:110px;
            float:left;
        }

最佳答案

月排行榜 / 总排行榜

某一个“天”

2024-7-5 20:00:41

在浮动元素之后添加一个清除浮动的元素：
html
<div style="clear: both;"></div>
使用伪元素清除浮动：
css
#end::after {  
    content: "";  
    display: table;  
    clear: both;  
}
这两种方法都可以帮助父元素正确地调整其高度，以适应浮动子元素。

跳转到最佳答案楼层

某一个“天”

在浮动元素之后添加一个清除浮动的元素：
html
<div style="clear: both;"></div>
使用伪元素清除浮动：
css
#end::after {  
    content: "";  
    display: table;  
    clear: both;  
}
这两种方法都可以帮助父元素正确地调整其高度，以适应浮动子元素。

Sorawithcat

某一个“天” 发表于 2024-7-5 20:00
在浮动元素之后添加一个清除浮动的元素：
html

清除了浮动效果的，结果还是占有了位置

Sorawithcat

某一个“天” 发表于 2024-7-5 20:00
在浮动元素之后添加一个清除浮动的元素：
html

按照这个思路我已经解决了