清除浮动和解决底层元素上浮的几种方法_html用了float后,后面的内容上来了-优快云博客

本文链接：https://blog.youkuaiyun.com/wangbinXMU/article/details/79102084

本文探讨了在HTML布局中使用CSS浮动属性导致的外层容器高度坍塌及后续元素上浮的问题，并提供了多种解决方案，包括使用clear属性、伪元素清除浮动等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:

<div class="outer">
  123
    <div class="inner">
    456
    </div>
</div>
<div class="next">
789
</div>

CSS:

.outer{
background:red;
}
.inner{
    float:left;
    background:blue;
    height:100px;
    width:100px;
}

.next{
    height:100px;
    width:200px;
    background:green;
}

存在问题：outer高度坍塌，next上浮

首先你要理解文档流和浮动：

文档流：自上而下，从左到右。

浮动（两张纸叠放，最下面的是文档流，上面的是浮动元素的位面）：脱离文档流。

然后分析问题：

outer，高度自适应，存在于文档流中

inner，高100px, 浮动，脱离文档流

next，高度100px，存在于文档流中。

文档流（底层）next紧跟outer，并不受浮动元素影响，因为不在同一个位面。

方法1： next的CSS中添加clear:both ;//解决了next上浮,但是未解决outer高度坍塌

方法2：在outer与next元素之间添加<div class="clear"> </div>, 并设CSS，解决了next上浮，但是outer高度坍塌未解决。

html:

<div class="outer">
   123
   <div class="inner">
      456
   </div>
</div>
<div class="clear"></div>
<div class="next">
   789
</div>

并添加：

.clear:after{
   content:'.'; //在.clear元素的内容的后 面添加上“.”
   background:red;
   display:block;
   clear:both;
   visibility:hidden; 
   height:0;
}

方法3：在inner后面同级添加div, 并设clear的CSS同方法2

html:

<div class="outer">
    123
    <div class="inner">
        456
    </div>
    <div class="clear"> </div>
</div>
<div class="next">
    789
</div>

方法4.给outer设定高度100px，这样在文档流层，底部的next会被挤下去，看起来也能排版正常,两者都解决,但是这样outer就不能高度自适应。

方法5. 如果inner用了float而outer没有用时，因为innter脱离外层outer，所以outer会出现高度坍塌问题，可以outer也使用float。但是这种方法将outer也脱离文档流，使outer宽高与其内部内容的宽高一致，但是next仍在文档流，会上浮。

方法6：对浮动元素的父元素用:after方法

outer:after{
    content:'.'; //在.clear元素的内容的后面添加上“.”
    background:red;
    display:block;
    clear:both;
    visibility:hidden; 
    height:0;
}

总的来说方法3和方法6较好解决问题，当然方法3中也可以直接 .clear{clear:both};不用设置.clear:after{xx}也能达到一样的效果