浮动

float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除 ，但是仍然保持部分的流动性（与绝对定位相反）。

1. 浮动之后的特点：

脱离文档流。 (解释：默认情况下，块级元素的高度由内容撑开，但是当块级元素的子元素被设置浮动以后，块级元素的高度将不再受到该浮动子元素的影响，浮动后的元素会跑到文档流的上一层)
保留部分流动性。(解释：浮动以后的元素依然受到父元素的宽度限制，父元素的宽度不足以容纳当前行的浮动元素的时候，浮动的元素会自动换行。)
不管是行内元素还是块元素，只要浮动以后，默认的宽高将由内容撑开。比如，块元素的原本的默认宽度是一整行（100%）
但是浮动以后，将变为由内容决定。
浮动以后，浮动的元素将和相邻的下一个元素共用一行。
浮动以后，将不存在margin塌陷、margin合并的问题，四个方向都可以设置margin。
浮动之后的元素不会像行内元素和行内块元素一样被当作文本去处理。

2. 浮动后的影响

对兄弟元素的影响：浮动元素后面的兄弟会占据浮动之前浮动元素的位置; 对前面的兄弟没有影响。
对父亲元素的影响：导致父元素塌陷（影响高度），但是浮动的元素依然受到父元素宽度的影响。

3.解决浮动以后父元素高度塌陷的问题

方案一：给父元素也加上浮动。
方案二：给父元素加一个高度(自行计算)
方案三：给父元素设置overflow:hidden;
方案四：在最后一个浮动元素的结尾处加一个不浮动的块级元素，然后设置css属性：clear:both。
方案五：使用伪元素选择器(推荐)

/*选中内容的结尾处加入一个指定的元素*/  
.parent::after{  
content: "";  
display: block;  
clear: both;  
}

建议：布局的时候，兄弟元素要么全都浮动，要么全都不浮动。

4. 浮动布局练习

i浮动布局练习

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>Rock学前端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .leftFloat {
            float: left;
        }

        .rightFloat {
            float: right;
        }

        .clearFloat::after {
            content: "";
            display: block;
            clear: both;
        }

        div{
            box-sizing: border-box;
        }

      /*  div{
            box-sizing: border-box;
        }
*/
        .container {
            width: 960px;
            margin: 0 auto;
            text-align: center;
        }

        .logo {
            width: 200px;
        }

        .banner1 {
            width: 540px;
            margin: 0 10px;
        }

        .banner2 {
            width: 200px;
        }

        .page-header *:nth-child(n) {
            height: 80px;
            background: gray;
            vertical-align: middle;
            line-height: 80px;
        }
        .page-menu{
            width: 960px;
            height: 30px;
            background: gray;
            margin: 10px auto;
        }
        .page-center{
            width: 960px;
        }

        .center-left-top div,.center-left-bottom div{
            border: 1px solid black;
            float: left;
            line-height: 100px;
            vertical-align: center;
        }
        .center-right div{
            border: 1px solid black;
            line-height: 100px;
            vertical-align: center;

        }

        .center-left-top div{
            height: 200px;
            width: 370px;
        }
        .center-left-bottom div{
            height: 200px;
            width: 180px;
        }
        .center-right div{
            height: 130px;
            width: 200px;
        }

        .block2,.block4,.block6{
            margin: 0 10px;
        }

        .block8{
            margin: 10px 0;
        }
        .center-left-top,.center-left-bottom{
            margin-bottom: 10px;
        }
        .page-footer{
            height: 60px;
            width: 960px;
            background: gray;
            line-height: 60px;
            vertical-align: middle;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="page-header clearFloat">
        <div class="logo leftFloat">logo</div>
        <div class="banner1 leftFloat">banner1</div>
        <div class="banner2 rightFloat">banner2</div>
    </div>

    <div class="page-menu">菜单</div>

    <div class="page-center clearFloat">
        <div class="center-left leftFloat">
            <div class="center-left-top clearFloat">
                <div class="block1">栏目1</div>
                <div class="block2">栏目2</div>
            </div>
            <div class="center-left-bottom clearFloat">
                <div class="block3">栏目3</div>
                <div class="block4">栏目4</div>
                <div class="block5">栏目5</div>
                <div class="block6">栏目6</div>
            </div>
        </div>
        <div class="center-right leftFloat">
            <div class="block7">栏目7</div>
            <div class="block8">栏目8</div>
            <div class="block9">栏目9</div>
        </div>
    </div>
    <div class="page-footer">页脚</div>
</div>
</body>
</html>

十五、css浮动

浮动