Css Block

清除浮动

Clear 属性的含义

对设置了 clear 属性的元素自身做一些限制操作，而并非人们常说的对 float 元素做限制操作。

  1. none：默认值，允许左右浮动
  2. left：左侧抗浮动
  3. right：右侧抗浮动
  4. both：两侧抗浮动

注意

  • clear 属性是让自身不能和前面的浮动元素相邻，也就是说后面的浮动元素它是不管的。更进一步讲，float 为 left 时，left 有效，both 等同于 left；float 为 right 时，right 有效，both 等同于 right。

  • clear 属性只有块级元素才有效，而伪元素默认都是内联，这就是平时借助伪元素清除浮动时需要设置 display 的原因。

示例


我是浮动元素

我是浮动元素

<div class="parent">
    <p>我是浮动元素</p>
    <p>我是浮动元素</p>
</div>
1
2
3
4
.parent {
    overflow: hidden; /* bfc */
    border: 1px solid #3eaf7c;
}
.parent p {
    float: left;
}
1
2
3
4
5
6
7

方案一


我是浮动元素

我是不浮动元素

<div class="parent">
    <p>我是浮动元素</p>
    <p class="clear">我是不浮动元素</p>
</div>
1
2
3
4
.parent {
    overflow: hidden; /* bfc */
    border: 1px solid #3eaf7c;
}
.parent p {
    float: left;
}
.parent .clear {
    clear: both;
}
1
2
3
4
5
6
7
8
9
10

方案二


我是浮动元素

我是不浮动元素

<div class="parent1">
    <p class="clear">我是浮动元素</p>
    <p>我是不浮动元素</p>
</div>
1
2
3
4
.parent {
    overflow: hidden; /* bfc */
    border: 1px solid #3eaf7c;
}
.parent p {
    float: left;
}
.parent .clear {
    float: none;
}
.parent .clear::before {
    content: '';
    display: block;
    clear: both;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

方案三


我是浮动元素

我是不浮动元素

<div class="parent">
    <div class="clear">
        <p style="float:left">我是浮动元素</p>
    </div>
    <p>我是不浮动元素</p>
</div>
1
2
3
4
5
6
.parent {
    border: 1px solid #3eaf7c;
}
.parent .clear {
    overflow: hidden;
}
1
2
3
4
5
6

方案四


我是浮动元素

我是不浮动元素

<div class="parent">
    <p style="float:left">我是浮动元素</p>
    <div class="clear"></div>
    <p>我是不浮动元素</p>
</div>
1
2
3
4
5
.parent {
    border: 1px solid #3eaf7c;
}
.parent .clear {
    clear: both;
}
1
2
3
4
5
6

← 扩大点击区域 →