CSS的clear属性对浮动的元素解除束缚：把握两大用法，玩转布局

前端

2024-02-10 20:43:56

CSS中的clear属性是一个清除浮动的重要方法，在网页制作中我们经常需要用到它，那clear属性是如何工作的呢？本文将从浮动与clear的理论入手，结合案例讲解clear属性的两种用法，教会读者如何灵活使用clear属性实现布局。

浮动与clear

浮动

浮动(float)属性可以使得元素脱离正常的文档流，并沿着其包含块的左或右边缘排列。浮动元素不会占用任何空间，也不会影响其他元素的位置，因此经常用于创建多列布局或其他复杂布局。

清除浮动

当浮动元素在一个包含块中堆叠时，可能会导致内容重叠或显示不正确的情况。为了解决这个问题，我们需要使用clear属性来清除浮动。

clear属性用法

语法

clear属性的语法如下：

clear: none | left | right | both;

none：不清除浮动。
left：清除左边的浮动。
right：清除右边的浮动。
both：清除左右两边的浮动。

结构

<div class="container">
  <div class="float-left">浮动元素1</div>
  <div class="float-right">浮动元素2</div>
  <div class="clear-both">清除浮动</div>
</div>

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clear-both {
  clear: both;
}

实例

用法一：清除浮动元素下面的内容

在下面的示例中，我们将使用clear属性来清除浮动元素下面的内容。

<div class="container">
  <div class="float-left">浮动元素</div>
  <div class="content">内容</div>
</div>

.float-left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}

.content {
  clear: left;
  width: 100%;
  background-color: blue;
}

在上面的示例中，浮动元素是红色的，内容是蓝色的。由于浮动元素设置了clear属性为left，因此内容会清除浮动元素左边的浮动，从而显示在浮动元素的下方。

用法二：清除父元素中的所有浮动元素

在下面的示例中，我们将使用clear属性来清除父元素中的所有浮动元素。

<div class="container">
  <div class="float-left">浮动元素1</div>
  <div class="float-right">浮动元素2</div>
  <div class="clear-both">清除浮动</div>
</div>

.float-left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}

.float-right {
  float: right;
  width: 200px;
  height: 200px;
  background-color: blue;
}

.clear-both {
  clear: both;
}