浮动布局有哪些优点？有什么缺点？清除浮动有哪些方式？

艾光远

已于 2025-08-09 00:06:03 修改

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Interview 文章标签：前端开发 CSS 面试

于 2021-11-10 17:13:48 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/121251650

Interview 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

浮动布局常用于图文混排，让文字环绕图片，同时具备块级元素的特性，但会导致父元素高度塌陷。清除浮动的方法包括：添加额外子标签配合 clear:both，父级设置 overflow 或高度，以及使用伪类清除（推荐）。

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

浮动布局简介：当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。

1. 浮动布局的优点

浮动布局优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质，例如可以设置宽高等。但它与inline-block还是有一些区别的，第一个就是横向排序的时候，float可以设置方向而inline-block方向是固定的；第二就是inline-block在使用时有时会有空白间隙的问题。

2. 浮动布局的缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

3. 清除浮动的方法

1. 添加额外的子标签配合 clear:both 清除浮动

<style>
    .child{
        width:100px;
        height:100px;
        background:red;
        float: left;
    }
</style>

<div class="parent">    
    <div class="child"></div>
    <!-- 添加一个额外的标签 -->
    <div style="clear