万能清除浮动的方法，让您的网站排版轻松搞定

2024-02-02 20:42:05

清除浮动：让你的网页布局井然有序

浮动元素在网页布局中随处可见，但它们也会带来一些令人头疼的问题，比如无法正确换行。为了解决这个问题，我们需要引入 清除浮动 的概念。本文将深入探讨 8 种清除浮动的方法，并详细分析它们的优缺点，帮助你轻松搞定网站排版。

1. 万能清除法（推荐）

原理： 在父元素中添加一个空的 div 元素，并设置其 clear 属性为 both，即可清除父元素内所有浮动元素。

代码示例：

<div class="parent">
  <div class="child1" style="float: left;"></div>
  <div class="child2" style="float: right;"></div>
  <div class="clear"></div>
</div>

优点：

简单易懂，适用于任何情况。
不会影响父元素或子元素的布局。

2. 父级 div 定义高度

原理： 给父元素设置一个高度，并设置 overflow: hidden 属性，会自动清除浮动。

代码示例：

<div class="parent" style="height: 100px; overflow: hidden;">
  <div class="child1" style="float: left;"></div>
  <div class="child2" style="float: right;"></div>
</div>

优点：

简单易用，无须添加额外的元素。
不影响子元素的布局。

缺点：

如果父元素的高度不合适，可能会导致页面布局混乱。

3. 父级 div 定义伪类 :after

原理： 使用 :after 伪类在父元素后面添加一个元素，从而清除浮动。

代码示例：

<div class="parent">
  <div class="child1" style="float: left;"></div>
  <div class="child2" style="float: right;"></div>
</div>

<style>
.parent:after {
  content: "";
  display: block;
  clear: both;
}
</style>

优点：

不需要添加额外的元素。
可以灵活控制清除浮动的方式。

缺点：

需要使用 CSS 来实现，可能不适用于所有浏览器。

4. clear 属性

原理： 给浮动元素设置 clear 属性，可以清除其旁边的浮动元素。

代码示例：

<div class="parent">
  <div class="child1" style="float: left;"></div>
  <div class="child2" style="float: right; clear: both;"></div>
</div>

优点：

只需对浮动元素设置属性，操作简单。
不影响其他元素的布局。

缺点：

只能清除浮动元素旁边的一个方向的浮动元素。

5. 空 div 撑开法

原理： 添加一个空 div 元素，并设置 clear: both 和 height: 0 等属性，撑开父元素，从而清除浮动。

代码示例：

<div class="parent">
  <div class="child1" style="float: left;"></div>
  <div class="child2" style="float: right;"></div>
  <div class="clear"></div>
</div>

<style>
.clear {
  clear: both;
  height: 0;
  font-size: 0;
}
</style>

优点：

兼容性好，适用于大多数浏览器。
不影响其他元素的布局。

缺点：

需要添加额外的元素，可能导致页面代码冗余。

6. display:table 和 display:table-cell

原理： 给父元素和浮动元素分别设置 display: table 和 display: table-cell 属性，将父元素表现为一个表格，从而清除浮动。

代码示例：

<div class="parent" style="display: table;">
  <div class="child1" style="float: left; display: table-cell;"></div>
  <div class="child2" style="float: right; display: table-cell;"></div>
</div>

优点：

兼容性好，效果稳定。
不影响其他元素的布局。

缺点：

可能会影响元素的语义含义。

7. flex 布局

原理： flex 布局是一种新的布局方式，它可以自动处理浮动元素的换行问题。

代码示例：

<div class="parent" style="display: flex;">
  <div class="child1" style="float: left;"></div>
  <div class="child2" style="float: right;"></div>
</div>

优点：

现代化的布局方式，兼容性好。
可以轻松控制元素的排列方式。

缺点：

IE9 及以下版本浏览器不支持。

8. overflow:hidden

原理： 给父元素设置 overflow: hidden 属性，会自动将浮动子元素向父元素靠齐，从而清除浮动。

代码示例：

<div class="parent" style="overflow: hidden;">
  <div class="child1" style="float: left;"></div>
  <div class="child2" style="float: right;"></div>
</div>