CSS浮动与清除-优快云博客

本文链接：https://blog.youkuaiyun.com/q_A_p/article/details/53320827

本文介绍了CSS中的float属性及其对元素布局的影响，详细解释了如何通过clear:both和其他方法解决由浮动引起的布局问题。

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

float是css样式中的定位属性，用于设置标签的左右浮动，浮动后的元素不属于html文档流，需要用清除浮动把标签拽回到文档流中。

浮动值有 left：向左浮动和right：向右浮动

因为html文档流是自窗体自上而下分成一行一行，并在每行中按从左到右的顺序排放元素

CSS 清除浮动：清除浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清除浮动也变得非常麻烦。

清除浮动的常用方式：

1.结尾处加空div标签 clear:both（或在下一个元素上加clear:both;clear属性值：left、right、both）

    <style>
        .d1{width:200px; height:200px; background:red; float: left; }
        .d2{width:300px; height:300px; background:blue;float: left;}
        .d3{width:500px; height:500px; background:green; clear:both;}
    </style>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>

2.父级div定义伪元素:after和 zoom

3.父级div定义 overflow:hidden

 <style>
        .d1{width:200px; height:200px; background:red; float: left; }
        .d2{width:300px; height:300px; background:blue;float: left;}
        .d{width:500px; height:500px; background:green; overflow: hidden;}
    </style>
<body>
    <div class="d">
    	<div class="d1"></div>
    	<div class="d2"></div>
    </div>
</body>

浮动的元素脱离文档流后，对块元素而言，从上向下的文档流中找不到浮动的元素，所以在浮动元素后加块元素，块元素会被覆盖掉。

浮动的元素脱离文档流后，这个浮动的块元素虽然脱离了文档流，但对它后面的行元素而言，从左至右的位置中，是要以这个浮动元素的位置开始的。

clear:both; 的应注意：

1.加了clear:both的元素需要为块元素。这样clear:both才能清除块“从上而下”的文档流中被浮动的元素。

clear:both只是清除它之上的浮动元素，如果用在行内元素上，实际上是基于一行，所以不起作用。

2.不要加在外层的div外面，如果这个外层div没有浮动，那这个clear:both是不起作用的。