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

Sorawithcat

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

1.    
   
2. 
   
3.         #end {
   
4.             background-color: lightseagreen;
   
5.             height: 3000px;
   
6.             padding-left: 10px;
   
7.             column-count:5;
   
8.             column-rule: 2px dashed #ccc;
   
9.             column-gap: 5px;
   
10.             position:relative;
    
11.         }
    
12.     .news {
    
13.             width: 240px;
    
14.             height:auto;
    
15.             padding: 10px;
    
16.             border: 1px solid #ccc;
    
17.             border-radius: 5px;
    
18.             box-shadow: 0 0 5px #ccc;
    
19.             margin: 10px;
    
20.             margin-left:20px;
    
21.             break-inside: avoid;
    
22.             position:relative;
    
23.         }
    
24. 
    
25.             .news img {
    
26.                 position:relative;
    
27.                 width: 240px;
    
28.                 display: block;
    
29.                 height: auto;
    
30.             }
    
31. 
    
32.         .endwords {
    
33.             position: relative;
    
34.             bottom: 110px;
    
35.             background-color: wheat;
    
36.             width: 240px;
    
37.             opacity: 0;
    
38.             color: black;
    
39.             height: 110px;
    
40.             text-align:center;
    
41.             line-height:110px;
    
42.             float:left;
    
43.         }

复制代码

最佳答案

月排行榜 / 总排行榜

某一个“天”

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

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