CSS 清除浮动

CSS 清除浮动

在元素设置浮动（float）后，该元素就会脱离文档流并且向左或向右浮动；

浮动的副作用
一、浮动元素会造成父元素的高度塌陷；
（如下：父元素panel的高度没有了）

<style>
    .panel{
        border: 2px solid red;
    }
    .box{
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: cadetblue;
        float: left;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12

<div class="panel">
     <div class="box">div>
     <div class="box">div>
     <div class="box">div>
div> 
1
2
3
4
5

二、浮动元素的后续元素会受到影响；
（如下：box2的位置受到前面元素浮动的影响，而且不管box2是在panel里面还是外面都会受到影响）

<style>
     .panel{
         border: 2px solid red;
     }
     .box{
         width: 100px;
         height: 100px;
         margin: 10px;
         background-color: cadetblue;
         float: left;
     }
     .box2{
         width: 200px;
         height: 200px;
         background-color: salmon;
     }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="panel">
     <div class="box">div>
     <div class="box">div>
     <div class="box">div>
     <div class="box2">div>
div> 
1
2
3
4
5
6

清除浮动的方法
一、父元素设置高度；
二、受影响的元素增加clear属性；
三、overflow清除浮动；
四、伪对象方式；

示例：
一、父元素设置高度；
如果父元素高度塌陷，可以给父元素设置高度来撑开父元素的高度；

<style>
     .panel{
         height: 200px;
         border: 2px solid red;
     }
     .box{
         width: 100px;
         height: 100px;
         margin: 10px;
         background-color: cadetblue;
         float: left;
     }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="panel">
     <div class="box">div>
     <div class="box">div>
     <div class="box">div>
div> 
1
2
3
4
5

但是这样也会有一个问题，就是当父元素内部还有一个不是浮动的元素时，就会影响到这个元素的位置；如下：

二、受影响的元素增加clear属性；
上面的问题中，可以在受影响的元素中加入clear来清除其他元素浮动对他位置的影响，如下在box2中使用clear属性清除浮动的影响：

<style>
     .panel{
         height: 200px;
         border: 2px solid red;
     }
     .box{
         width: 100px;
         height: 100px;
         margin: 10px;
         background-color: cadetblue;
         float: left;
     }
     .box2{
         width: 150px;
         height: 150px;
         background-color: salmon;
         clear: both;
     }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="panel">
     <div class="box">div>
     <div class="box">div>
     <div class="box">div>
     <div class="box2">div>
div> 
1
2
3
4
5
6

三、overflow清除浮动；
如果父元素不能设定固定高度，可以在父元素样式中添加 overflow：hidden；clear : both; 来清除浮动；如下：

<style>
     .panel{
         overflow: hidden;
         clear: both;
         border: 2px solid red;
     }
     .box{
         width: 100px;
         height: 100px;
         margin: 10px;
         background-color: cadetblue;
         float: left;
     }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="panel">
     <div class="box">div>
     <div class="box">div>
     <div class="box">div>
div> 
1
2
3
4
5

此时，父元素也被撑开了；但是如果父元素内部还有非浮动的其他元素，还是会存在问题；如下图：

这时可以在非浮动的元素样式中添加clear：both；来清除浮动元素对自己位置的影响，如下：

<style>
     .panel{
         overflow: hidden;
         clear: both;
         border: 2px solid red;
     }
     .box{
         width: 100px;
         height: 100px;
         margin: 10px;
         background-color: cadetblue;
         float: left;
     }
     .box2{
         width: 150px;
         height: 150px;
         background-color: salmon;
         clear: both;
     }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="panel">
     <div class="box">div>
     <div class="box">div>
     <div class="box">div>
     <div class="box2">div>
div> 
1
2
3
4
5
6

四、伪对象方式；
如果父级元素塌陷，并且父元素的同级元素也受到了影响，还可以使用伪对象的方式处理；
为父标签添加伪类after，设置空的内容，并且使用clear：both；
这种情况下，父布局不能设置高度；

<style>
     .panel{
         border: 2px solid red;
     }
     .panel::after{
         content: "";
         display: block;
         clear: both;
     }
     .box{
         width: 100px;
         height: 100px;
         margin: 10px;
         background-color: cadetblue;
         float: left;
     }
     .box2{
         width: 150px;
         height: 150px;
         background-color: salmon;
     }
 style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="panel">
     <div class="box">div>
     <div class="box">div>
     <div class="box">div>  
div> 
<div class="box2">div>
1
2
3
4
5
6

但是如果box2在父元素内部，box2依然会出现位置问题；如下：

这时，也只要在box2样式中添加clear：both；即可清除浮动元素对他位置的影响；如下图：

<style>
     .panel{
         border: 2px solid red;
     }
     .panel::after{
         content: "";
         display: block;
         clear: both;
     }
     .box{
         width: 100px;
         height: 100px;
         margin: 10px;
         background-color: cadetblue;
         float: left;
     }
     .box2{
         width: 150px;
         height: 150px;
         background-color: salmon;
         clear: both;
     }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="panel">
     <div class="box">div>
     <div class="box">div>
     <div class="box">div>  
     <div class="box2">div>
div> 
1
2
3
4
5
6