关于如何清除浮动

在了解如何清除浮动之前，我们先了解一下为什么我们要对元素进行浮动。我们都知道，div作为一个块标签来说，它是独占一行，从上而下排列的，这就是所谓的标准流。但是，在实际应用中，我们有时需要将两个或者多个div在一行显示，这时，我们就要对元素进行浮动已达到这个结果。浮动之后的元素已经脱离了文档流，漂浮于文档流之上。下面我们先来看一标准流是什么情况？

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <style type="text/css">
 8         *{
 9             padding:0;
10             margin:0;
11         }
12         .box{
13             background-color:red;
14             width:100%;
15         }
16         .div1{
17             background-color:pink;
18             width:300px;
19             height:300px;
20         }
21         .div2{
22             background-color:blue;
23             width:300px;
24             height:300px;
25         }
26     </style>
27     <body>
28         <div class="box">
29             <div class="div1"></div>
30             <div class="div2"></div>
31         </div>
32     </body>
33 </html>

　　上面所描述的就是标准流，当我们没有给父级也就是box高度时，它的高度是由里面的内容，也就是里面的div块的高度撑起来的，而两个div块也是按照上面我们所提到的独占一行，自上而下排列的下面我们再来看一下，当我们对div块进行浮动之后，会出现什么情况。此时我们只需要给div1和div2加浮动，

      　　.div1{
            background-color:pink;
            width:300px;
            height:300px;
            float:left; //添加浮动
        }
        .div2{
            background-color:blue;
            width:300px;
            height:300px;
            float:left;  //添加浮动
        }

　　从上面结果我们可以看出，两个div块占据了同一行，而且，它们已经撑不起来父级（原来的黑色区域）的高度了。这就说明它们脱离了我们的文档流，已经不占据页面空间了。需要注意的是浮动只能是左右浮动。

    第二，事物总是双面的，浮动虽然给我们带来了一定的方便，但也给我们造成了一定的影响，浮动元素相当于给元素增加了一个inline-block（行内块标签），行元素浮动之后相当于给它转化成了块元素，此时可以给它设置宽度和高度；浮动元素脱离了我们的文档流，不再占据页面的高度；那么我们如何让才能消除浮动带来的影响呢，下面我们就来介绍一下清除浮动的几种常见的方法。

第一种方法：
给父级元素增加高度
.box{
        width:100%;
        background-color:black;
        height:300px;  
}
第二种方法：当父级容器的高度不能确定时，我们可以给父级添加overflow:hidden;
.box{
	background-color:black;
	width:100%;
	overflow:hidden;
}

第三种方法：给浮动元素添加一个空的兄弟元素，然后给它添加clear:both;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .box{
            background-color:black;
            width:100%;
        }
        .div1{
            background-color:pink;
            width:300px;
            height:300px;
            float:left;
        }
        .div2{
            background-color:blue;
            width:300px;
            height:300px;
            float:left;
        }
        .div3{
            clear:both;
        }
    </style>
    <body>
        <div class="box">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
        </div>
    </body>
</html>

 

第四种方法：利用伪类 :after  清除浮动。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .box{
            background-color:black;
            width:100%;
        }
        .div1{
            background-color:pink;
            width:300px;
            height:300px;
            float:left;
        }
        .div2{
            background-color:blue;
            width:300px;
            height:300px;
            float:left;
        }
        .box:after{
            content:"";
            clear:both;
            display:block;
        }
    </style>
    <body>
        <div class="box">
            <div class="div1"></div>
            <div class="div2"></div>
        </div>
    </body>
</html>

再利用伪类清除浮动的时候我们需要注意几个问题，

　　首先，我们是要给浮动元素的父级添加 :after

　　其次，一定要有content属性，即使内容为空，

　　最后，转化为块元素。display:block;

清除浮动之后的效果如下：

上述几种方法都是可以实现这种效果的哦！

posted @ 2017-01-17 16:28  冰魄花蕊  阅读(198)  评论(1)    收藏  举报