CSS浮动和清除浮动

最新推荐文章于 2025-08-24 17:40:52 发布

原创最新推荐文章于 2025-08-24 17:40:52 发布 · 329 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #css

CSS基础知识专栏收录该内容

3 篇文章

订阅专栏

本文介绍了CSS中浮动模型的基本概念及浮动元素如何脱离文档流，导致包含它们的父元素高度塌陷的问题。提供了两种常见的清除浮动的方法：使用额外的清除元素和设置父容器的overflow属性。

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

浮动模型：浮动的框可以左右移动（float:left或float:right），直到它的外边缘碰到包含框或另一个浮动框的边缘，浮动框不在文档的普通流中，即不占用普通流的空间。

因为浮动框不占用普通文档流空间，所以浮动会造成页面布局问题，例如一下的文档结构和样式：

<span style="font-size:14px;"><div class="container">
  <div class="left_block"></div>
  <div class="right_block"></div>
</div></span>

<span style="font-size:14px;">.container{
  background-color: black;
  width: 960px;
  margin: 0 auto;

}

.left_block{
  background-color: red;
  float: left;
  width: 240px;
  height: 300px;
}

.right_block{
  background-color: blue;
  float: right;
  width: 700px;
  height: 300px;
}</span>

显示效果如下：

背景容器container没有显示是因为它含有的两个元素都是浮动元素，因此不存在占用的空间，container的高度则为0，解决上述问题的方法就是清除浮动，以下介绍清楚浮动最常用的两个方法。

方法一：

<span style="font-size:14px;"><div class="container">
  <div class="left_block"></div>
  <div class="right_block"></div>
  <div class="clear"></div>
</div></span>

<span style="font-size:14px;">.clear{
  clear: both;
}
</span>

显示效果如下：

此时背景图片则正常显示，高度自动适应为高度最大的那个元素。此方法兼容IE，firefox和chrome，但是要增加没有意义的标签。

方法二：

添加父容器container的样式overflow:hidden

<span style="font-size:14px;">.container{
  background-color: black;
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}</span>

显示效果如下

同样能达到目的，并且编写的代码量最小。此方法在IE,chrome和firefox上都兼容。