CSS清除浮动

原创于 2023-11-15 11:30:46 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

CSS 语言专栏收录该内容

4 篇文章

订阅专栏

本文解释了CSS浮动如何影响文档流，导致父元素高度塌陷的问题。通过学习浮动的工作机制和如何利用清除浮动来修复布局混乱，以保持结构完整性。

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

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

浮动的原理是让图片脱离文档流，直接浮在上面。
一般布局是让内容来自动填充高度，使用浮动后原本填充的高度会消失，父元素高度为0，后续添加内容布局会产生混乱，造成高度塌陷，可以利用清除浮动来解决父元素高度塌陷的问题。