front-end-css-knowledge-points
/
4页面布局-浮动.html


    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <!-- 三大流： 实际开发中，一个页面都包含了三种布局方式
        1 普通流（标准流）：标签按照规定好的默认方式进行排列，盒子之间的缝隙是标准流无法控制的
            1.5： 有很多的布局效果是标准流没法完成的，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式
        2 浮动（float)：最典型的应用，可以让多个块元素一行内排列显示，可以解决缝隙等问题
        网页布局第一准则：多个元素纵向排列找标准流，横向排列找浮动
            float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

    -->


        <!-- <div class="dddd">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <style>
            .left,
            .right {
                width: 200px;
                height: 200px;
                background-color: pink;
                /* 如果加了浮动左，就会成为同一行并且挨在一起 */
                /* 盒子一旦浮动就会在其他标准流上面，并且不保留位置 */
                /* 如果一个盒子加了浮动，另一个没加浮动，那浮动盒子就会叠加在不浮动的盒子上 */
                /* float: left; */
            }
        </style><br>
        <hr> -->


        <!-- 浮动元素的特性
            加了浮动之后的元素会具有很多特性，
            1浮动元素会脱离标准流，不会被其他元素遮挡，也不会被其他浮动元素遮挡；
            2浮动的元素会一行内显示并且元素顶部对齐
            3浮动元素的宽度和高度会被设置为100%，这样就可以让其他元素的宽度和高度自动调整为浮动元素的宽度和高度；
            4浮动元素具有行内块的特性
            2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对济排列。
            注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子
会另起一行对齐。
            浮动元素经常和标准流父级搭配使用
            为了约束浮动元素的位置，我们网页布局一般采取的策略是：
                先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
        -->


        <!-- 浮动元素搭配标准流父级排列：
        <div class="boxxiaomi">
            <div class="left1">left</div>
            <div class="right1">right</div>
        </div>
        <style>
            .boxxiaomi {
                width: 1200px;
                height: 460px;
                background-color: pink;
                margin: 0 auto;
            }

            .left1 {
                height: 460px;
                width: 230px;
                background-color: purple;
                float: left;
            }

            .right1 {
                float: right;
                width: 970px;
                height: 460px;
                background-color: yellow;
            }
        </style> -->


        <!-- 浮动案例二 -->
        <!-- <ul class="boxlili">
            <li></li>
            <li></li>
            <li></li>
            <li class="last"></li>
        </ul>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            li {
                list-style: none;
            }
            .boxlili {
                height: 285px;
                width: 1226px;
                background-color: pink;
                margin: 0 auto;
            }
            .boxlili li {
                width: 296px;
                height: 285px;
                background-color: purple;
                float: left;
                /* 这样赋值会导致第四个盒子不需要右边距的原因，导致父级不够宽容不下而换行， */
                /* 所以需要重置第四个li标签的右边距 */
                margin-right: 14px;
            }
            .boxlili .last {
                /* 重置的时候需要注意的是权重问题 */
                margin-right: 0;
            }
        </style> -->


        <!-- 浮动案例三 -->
        <!-- <div class="boxxx">
            <div class="left">1111</div>
            <div class="right">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
            </div>
        </div>
        <style>
            .boxxx {
                width: 1226px;
                height: 615px;
                background-color: pink;
                margin: 0 auto;
            }
            .left {
                float: left;
                width: 234px;
                height: 615px;
                background-color: black;
            }
            .right {
                float: right;
                width: 992px;
                height: 615px;
                background-color: yellow;
            }
            .right>div {
                width: 234px;
                height: 300px;
                background-color: red;
                float: left;
                margin-left: 14px;
                margin-bottom: 14px;
            }
        </style> -->


        <!-- 常见网页布局三 -->
        <div class="top">top</div>
        <div class="banner">banner</div>
        <div class="box">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li class="last">4</li>
            </ul>
        </div>
        <div class="footer">footer</div>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            li {
                list-style: none;
            }

            .top {
                height: 50px;
                background-color: gray;
            }

            .banner {
                width: 980px;
                height: 150px;
                background-color: gray;
                margin: 10px auto;
            }

            .box {
                width: 978px;
                margin: 0 auto;
                height: 300px;
                background-color: pink;
            }

            .box li {
                width: 237px;
                height: 300px;
                background-color: gray;
                float: left;
                margin-right: 10px;
            }

            .box .last {
                /* 去掉最右边多余的间距 */
                margin-right: 0;
            }

            .footer {
                /* 只要是通栏的盒子（和浏览器一样宽），是不需要指定宽度的 */
                height: 200px;
                background-color: gray;
                margin-top: 10px;
            }

            /* 浮动和标准流的父盒子搭配
            先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
            一个元素浮动了，理论上其余的兄弟元素也要浮动
            一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
            浮动的盒子只会影响浮动盒子后面的标准流，不会影响到前面的标准流
            */

            /* 关于父盒子的高度：
            理想状态是动态的高度，里面子盒子有多少，高度累加到多少父盒子高度就有多少
            因为父盒子不方便给高度，所以就有了清楚浮动的功能 */
            /* 清除浮动：
            由于父级盒子很多情况下不方便写死高度，但是盒子浮动情况下父盒子又获取不到浮动盒子的高度，
            最后父级盒子的高度就变成了0，就会影响到下面的标准流的盒子
            */

            /* 清楚浮动的本质：
            清楚浮动的本质就是清除浮动元素造成的影响
            如果父盒子本身有高度，则不需要清楚浮动
            清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响到下面的标准流了
            语法： 选择器 {clear：属性值}   常用例子： .box {clear:both}，可选值，left，right，both
            清楚浮动的策略是闭合浮动，将子盒子限制在父盒子中
            */

            /* 清楚浮动的方法：
            1额外标签法也称隔墙法，是W3C推荐的做法     就是在浮动元素的末尾添加一个空的标签例如  <div style='clear:both' ></div>
                用来关闭的元素必须是块级元素不能是行内元素
            2为父级添加overflow:hidden;    在父级元素的css中添加overflow:hidden;   但是overflow优缺点就是超出盒子的部分会被切除隐藏了
            3为父级添加after伪元素,代码如下,固定写法，复制粘贴使用即可，然后往父元素类中添加该类名：
                原理就是利用css生成了一个新的标签去闭合父元素，类似方法1
                .clearfix:after{
                    content: '';
                    display: block;
                    height: 0;
                    clear: both;
                    visibility: hidden;
                }
                .clearfix {
                    zoom: 1;
                }

            4为父级添加双伪元素类似方法3，直接少抄，然后加类名：
                .clearfix::before, .clearfix::after {
                    content: '';
                    display: table;
                }
                .clearfix::after {
                    clear: both;
                }
                .clearfix {
                    zoom: 1;
                }

                方法三和四都需要照顾到低版本的浏览器，也就是zoom：1可以照顾到
            */
        </style>
    </body>

    </html>