前端之路随笔小记——float浮动 VS clear清除浮动

最新推荐文章于 2025-06-03 21:10:57 发布

beyond_LH

最新推荐文章于 2025-06-03 21:10:57 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端的快乐生活文章标签：前端 float clear 浮动清除浮动

本文链接：https://blog.youkuaiyun.com/beyond9305/article/details/78482829

前端的快乐生活专栏收录该内容

18 篇文章

订阅专栏

本文通过实例讲解了CSS中浮动布局的基本原理及其带来的问题，包括父元素高度塌陷，并介绍了多种解决方案，如使用clear属性和overflow:hidden。

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

讲真，平时很少使用浮动，总感觉他是个恐怖分子，随时捣乱我的布局~~

有些知识还没有系统起来，一点点走吧，总会在某个时间点上恍然大悟~~

<html>
  <head>
    <meta charset=utf-8/>
	<style type=text/css>
	body{background:#cdc673;}
	.div_father{background:#fff8dc;border:1px solid #333;width:400px}
	.div_left,.div_right{border:1px dashed #fff;width:150px;height:150px;}
        .div_left{background:#ee4000;float:left;}	
	.div_right{background:b3ee3a;float:right;}
	</style>
  </head>
  <body>
    <div class="div_father">
	  <div class="div_left">左浮动</div>
	  <div class="div_right">右浮动</div>
	</div>
  </body>
</html>

清楚地看到，定义了三个class，一个父类，两个子类，大家都知道，块级元素一般不用指定高度，靠内容撑起其高度，也就是说他的高度是自适应的，那看下效果：

oh~~~父块没有被撑起来！就是因为子块使用了浮动，这也是浮动的一大缺点，如此一来，父块的很多设置都体现不出来了~~解决这个问题有好几种办法，最直接的就是给父块设置高度，但这个太局限了，需要提前知道子元素的综合高度，扩展性太差；再者就是使用浮动清除clear，让我们看下效果：

在CSS中加入.div_clear{clear:both;}，在html中父级div最后加入<div class="div_clear"></div>便实现了上面的效果；clear:both即清除左右浮动，使用它可以保证对子元素使用浮动不会影响父元素的属性；给这个块加些属性看下效果，.div_clear{clear:both;width:100px;height:100px;background:#333;}：