CSS（七）：浮动

一、float属性
取值：
left：左浮动
right：右浮动
none：不浮动

先看下面的一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
        .box1,.box3{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: blue;
            width: 120px;
            height: 100px;
        }
        .box3{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

效果：

因为DIV是块级元素，所以定义的三个DIV是竖直显示的。这时给第一个DIV添加浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
        .box1,.box3{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: red;
            float: left;/*添加左浮动*/
        }
        .box2{
            background-color: blue;
            width: 120px;
            height: 100px;
        }
        .box3{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

效果：

给第一个DIV添加浮动以后，第一个DIV脱离文档流而浮动起来，原先的位置会被下面其他的元素所取代，所以第二个DIV会在第一个DIV下面。

在来看看右浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
        .box1,.box3{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: red;
            /*float: left;*//*添加左浮动*/
            float: right;/*添加右浮动*/
        }
        .box2{
            background-color: blue;
            width: 120px;
            height: 100px;
        }
        .box3{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

效果：

可以看出第一个DIV浮动到了右边，而且和第二个DIV是在同一水平线上。

在给第二个DIV添加左浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
        .box1,.box3{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: red;
            /*float: left;*//*添加左浮动*/
            float: left;/*添加右浮动*/
        }
        .box2{
            background-color: blue;
            width: 120px;
            height: 100px;
            float: left;
        }
        .box3{
            background-color: yellow;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

效果：

如果想让三个DIV都在一排显示呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
        .box1,.box3{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: red;
            /*float: left;*//*添加左浮动*/
            float: left;/*添加右浮动*/
        }
        .box2{
            background-color: blue;
            width: 120px;
            height: 100px;
            float: left;
        }
        .box3{
            background-color: yellow;
            height: 120px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

效果：

从上面截图中可以得出结论：给块级元素添加浮动，可以使块级元素在一排显示。

二、浮动的作用
1、块元素同行排列显示，一般用于排版、分栏显示。
2、设置浮动属性后，脱离文档流向指定的左或右边对齐，直到父元素的边界或浮动的元素。
注意：
使用浮动后要及时清除，避免影响其后的网页元素。

三、清除浮动的必要性
浮动后，脱离了文档流不占网页空间。
浮动后的网页元素会影响同级元素。
使用clear属性清除浮动
clear属性取值：
left：清除左浮动。
right：清除右浮动。
both：同时清除左、右浮动。
none：不清除浮动。
清除浮动表明容器框的哪边不挨着浮动框。

看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
</head>
<body>
    <div id="box">
         <div class="box1"><img src="image/photo-1.jpg" alt="日用品"></div>
         <div class="box2"><img src="image/photo-2.jpg" alt="图书"></div>
         <div class="box3"><img src="image/photo-3.jpg" alt="鞋子"></div>
         <div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
             位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
             当中的应用。
         </div>
    </div>
</body>
</html>

效果：

下面给4个DIV都添加向左的浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
       #box{
           border: 1px solid #000;
       }
       .box1{
           border: 1px dashed red;
           float: left;
       }
       .box2{
            border: 1px dashed red;
            float: left;
        }
        .box3{
            border: 1px dashed #060;
            float: left;
        }
        .box4{
            border: 1px dashed red;
            font-size: 12px;
            line-height: 23px;
            float: left;
        }
        div{
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
         <div class="box1"><img src="image/photo-1.jpg" alt="日用品"></div>
         <div class="box2"><img src="image/photo-2.jpg" alt="图书"></div>
         <div class="box3"><img src="image/photo-3.jpg" alt="鞋子"></div>
         <div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
             位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
             当中的应用。
         </div>
    </div>
</body>
</html>

效果：

正常情况下，四个DIV应该在最外层的DIV里面，为什么会出现这种情况呢？原因：内层盒子有浮动，外层盒子不能自动扩高。如何解决呢？这时候就需要清除浮动了。

1、给里面第四个DIV清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
       #box{
           border: 1px solid #000;
       }
       .box1{
           border: 1px dashed red;
           float: left;
       }
       .box2{
            border: 1px dashed red;
            float: left;
        }
        .box3{
            border: 1px dashed #060;
            float: left;
        }
        .box4{
            border: 1px dashed red;
            font-size: 12px;
            line-height: 23px;
            clear: both;
        }
        div{
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
         <div class="box1"><img src="image/photo-1.jpg" alt="日用品"></div>
         <div class="box2"><img src="image/photo-2.jpg" alt="图书"></div>
         <div class="box3"><img src="image/photo-3.jpg" alt="鞋子"></div>
         <div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
             位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
             当中的应用。
         </div>
    </div>
</body>
</html>

效果：

四、清除浮动的方法
几个并列的盒子同时添加浮动，它们的父级盒子会出现以下几种情况：
1、背景不能显示。
2、边框不能撑开。
如何清除浮动：
方法一：添加新的元素，应用clear:both;

还是以上面的为例演示清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
       #box{
           border: 1px solid #000;
       }
       .box1{
           border: 1px dashed red;
           float: left;
       }
       .box2{
            border: 1px dashed red;
            float: left;
        }
        .box3{
            border: 1px dashed #060;
            float: left;
        }
        .box4{
            border: 1px dashed red;
            font-size: 12px;
            line-height: 23px;
            float: left;
        }
        div{
            margin: 10px;
            padding: 10px;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div id="box">
         <div class="box1"><img src="image/photo-1.jpg" alt="日用品"></div>
         <div class="box2"><img src="image/photo-2.jpg" alt="图书"></div>
         <div class="box3"><img src="image/photo-3.jpg" alt="鞋子"></div>
         <div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
             位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
             当中的应用。
         </div>
         <!--添加新的元素清除浮动-->
         <div class="clear"></div>
    </div>
</body>
</html>

效果：

方法二：父级添加overflow:auto;zoom:1;或者overflow:hidden;
//zoom:1;是在处理浏览器的兼容性问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
       #box{
           border: 1px solid #000;
           overflow: hidden;
       }
       .box1{
           border: 1px dashed red;
           float: left;
       }
       .box2{
            border: 1px dashed red;
            float: left;
        }
        .box3{
            border: 1px dashed #060;
            float: left;
        }
        .box4{
            border: 1px dashed red;
            font-size: 12px;
            line-height: 23px;
            float: left;
        }
        div{
            margin: 10px;
            padding: 10px;
        }
      /*   .clear{
            clear: both;
        } */
    </style>
</head>
<body>
    <div id="box">
         <div class="box1"><img src="image/photo-1.jpg" alt="日用品"></div>
         <div class="box2"><img src="image/photo-2.jpg" alt="图书"></div>
         <div class="box3"><img src="image/photo-3.jpg" alt="鞋子"></div>
         <div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
             位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
             当中的应用。
         </div>
         <!--添加新的元素清除浮动-->
         <!-- <div class="clear"></div> -->
    </div>
</body>
</html>

效果：

方法三：:after方法
注意：方法三要作用于浮动元素的父级。
例如：
/*==for IE6/7 Maxthon2==*/
#box{zoom:1;}
/*==for FF/chrome/opera/IE8==*/
#box:after{
           clear:both;
    content:'.';
    display:block;
    width:0px;
    height:0px;
    visibility:hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
       #box{
           border: 1px solid #000;
       }
       #box:after{
           clear: both;/*清除所有浮动*/
           content: '.';/*content内容可以为空*/
           display: block;/*转换为块级元素*/
           width: 0;
           height: 0;
           visibility: hidden;
       }
       .box1{
           border: 1px dashed red;
           float: left;
       }
       .box2{
            border: 1px dashed red;
            float: left;
        }
        .box3{
            border: 1px dashed #060;
            float: left;
        }
        .box4{
            border: 1px dashed red;
            font-size: 12px;
            line-height: 23px;
            float: left;
        }
        div{
            margin: 10px;
            padding: 10px;
        }
      /*   .clear{
            clear: both;
        } */
    </style>
</head>
<body>
    <div id="box">
         <div class="box1"><img src="image/photo-1.jpg" alt="日用品"></div>
         <div class="box2"><img src="image/photo-2.jpg" alt="图书"></div>
         <div class="box3"><img src="image/photo-3.jpg" alt="鞋子"></div>
         <div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
             位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
             当中的应用。
         </div>
         <!--添加新的元素清除浮动-->
         <!-- <div class="clear"></div> -->
    </div>
</body>
</html>