论坛 › Web开发 › 为何浮动后原位置还被占有位置

Sorawithcat 发表于 2024-7-5 13:01:44

为何浮动后原位置还被占有位置

其中#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;
}
这两种方法都可以帮助父元素正确地调整其高度，以适应浮动子元素。

Sorawithcat 发表于 2024-7-8 08:41:13

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



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

Sorawithcat 发表于 2024-7-8 08:47:44

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



按照这个思路我已经解决了{:10_250:}

查看完整版本: 为何浮动后原位置还被占有位置