<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实例代码_14(浮动)</title>
        <style type="text/css">
            .continer{
                /*设置其父元素,因为其子元素都为浮动元素
                 所以父元素无法撑开, 解决方式(清除浮动): 请看  实例代码_15*/
                width: 600px;
                border: 2px solid cornflowerblue;
            }
            .div_01,.div_02,.div_03{
                width: 100px;
                height: 100px;
                /*设置三个div都是左浮动/有浮动*/
                float: left;
                /*float: right;*/
            }
            .div_01{
                background: red;           
            }
            .div_02{
                background: green;
            }
            .div_03{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="div_01">第一个div元素</div>
            <div class="div_02">第二个div元素</div>
            <div class="div_03">第三个div元素</div>  
        </div>
    </body>
</html>

清除浮动

父级上增加属性 overflow：hidden

在最后一个子元素的后面加一个空的 div，给它样式属性 clear:both（不推荐）

使用成熟的清浮动样式类，clearfix

.clearfix:after,.clearfix:before{ content: "";display: table;}

.clearfix:after{ clear:both;}

.clearfix{zoom:1;}

清除浮动的使用方法：

 .con2{... overflow:hidden} 或者

<div class="con2 clearfix">

实例代码_15:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实例代码_15(清除浮动)</title>
        <style type="text/css">
            .continer{
                /*设置其父元素,因为其子元素都为浮动元素
                 所以父元素无法撑开, 解决方式(清除浮动) 3种方式*/
                /*(1)使用overflow:hidden清除浮动  推荐使用*/
                /*overflow:
hidden;*/
                width: 600px;
                border: 2px solid cornflowerblue;
            }
            /*(2)使用在浮动元素后添加空div元素 ,设置clear:both  不推荐*/
            /*.div_04{
                clear: both;
            }*/
            /*(3)使用成熟的清除浮动的方式(伪类及clear:both)  推荐使用*/
            .continer:after,.continer:before{
                content: '';
                display: table;
            }
            .continer:after{
                clear: both;
            }
            .div_01,.div_02,.div_03{
                width: 100px;
                height: 100px;
                float: left;
            }
            .div_01{
                background: red;
            }
            .div_02{
                background: green;
            }
            .div_03{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="div_01">第一个div元素</div>
            <div class="div_02">第二个div元素</div>
            <div
class="div_03">第三个div元素</div>  
            <!--清除浮动个第二种方式  添加空div元素-->
            <!--<div
class="div_04"></div>-->
        </div>
    </body>
</html>

二、定位

关于定位

我们可以使用 css 的 position 属性来设置元素的定位类型，postion 的设置项如下：

relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移

实例如下:

实例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位的元素</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: pink;
                /*生成相对定位的元素*/
                position: relative;
                left: 100px;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="continer">relative:表示生成相对定位的元素,元素本身所占据的文档流位置不变,设置元素相对于文档流位置的偏移</div>
    </body>
</html>

absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于 body 元素进行定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位的元素</title>
        <style type="text/css">
            .continer{
                width: 300px;
                height: 300px;
                background: darkseagreen;
                margin: 100px auto;
                /*设置父元素相对定位*/
                position: relative;
            }
            .inner{
                width: 200px;
                height: 200px;
                background: pink;
                /*生成绝对定位的元素*/
                position: absolute;
                left: 20px;
                top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner">absolute:表示生成绝对定位的元素,元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于 body 元素进行定位。</div>
        </div>
    </body>
</html>

fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位的元素</title>
        <style type="text/css">
            .continer{
                width: 30px;
                background: dodgerblue;
                text-align: center;
                /*设置固定定位*/
                position: fixed;
                left: 25%;
                top:0px;
            }
        </style>
    </head>
    <body
bgcolor="gainsboro">
        <div class="continer">该div元素为固定 定位元素</div>
    </body>
</html>

static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性

inherit 从父元素继承 position 属性的值

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级

定位元素是浮动的正常的文档流之上的，可以用 z-index 属性来设置元素的层级

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位的元素</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                /*设置层级: 首先必须是绝对定位的元素;
                然后使用z-index设计层级(取值1-999: 值越大层级越高)*/
                position: absolute;
            }
            .div_01{
                background: red;
                z-index: 2;
            }
            .div_02{
                background: green;
                z-index: 5;
            }
            .div_03{
                background: blue;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div class="div_01">第一个div元素</div>
        <div class="div_02">第二个div元素</div>
        <div class="div_03">第三个div元素</div>
    </body>
</html>

典型定位布局

1、固定在顶部的菜单

2、水平垂直居中的弹框

3、固定的侧边的工具栏

4、固定在底部的按钮

CSS实现垂直居中的问题

难点: 一个div在另一个div中的垂直居中的设置?

(1)利用text-align 实现块元素水平垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 400px;
                height: 300px;
                padding-top: 100px;
                background: skyblue;
                text-align: center;
            }
            .inner{
                display: inline-block;
                width: 200px;
                height:
200px;
                background: orangered;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(2)利用padding设置,且父元素和子元素的大小一致

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                padding: 20px;
                background: skyblue;
            }
            .inner{
                width: 200px;
                height: 200px;
                background: orangered;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(3)利用position和margin进行元素水平垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: skyblue;
                position: relative;
            }
            .inner{
                width: 100px;
                height: 100px;
                background: orangered;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -50px 0px 0px -50px;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(4)利用position进行元素的水平垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: skyblue;
                position: relative;
            }
            .inner{
                width: 100px;
                height: 100px;
                background: orangered;
                position: absolute;
                left: 0px;
                top: 0px;
                right:0px;
                bottom:0px;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(5)适用于图片的居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: skyblue;
                line-height: 200px;
                text-align: center;
            }
            img{
                width: 100px;
                height:
100px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <img src="images/InLett-logo.png"
alt="英莱特IT学院" />
        </div>
    </body>
</html>

效果: