标准流和浮动

一、标准流

网页上,元素自上而下,自左而右,块元素独占一行,行内元素一行显示多个,碰到父元素边界自动折行,就是标准流.

注:margin: 0 auto; 只能对标准流里边设置了宽度的块元素水平居中

二、浮动

属性:float

浮动特点:脱离标准流,不占位置,会紧贴着上一个浮动的边缘显示,顶对齐,换行没有间隙(缝隙),只能浮动到父元素的左边或者右边,受到父元素的约束.

值:

left	左浮动
right	右浮动

代码演示:

    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ccc;
        }
        .red,
        .green {
            width: 100px;
            height: 100px;
        }
        .red {
            float: left;
            background-color:red;
        }
        .green {
            float: right;
            width: 150px;
            height: 150px;
            background-color: #0f0;
        }
    </style>

效果展示: 

脱标元素(浮动/绝对定位/固定定位)的特点:

1.块元素脱标后,不会默认父元素的宽,宽高为0,内容会撑开宽高

2.行内元素脱标后,可以设置宽高了

        div {
            float: left;
            background-color: rgb(216, 56, 56);
        }
        span {
            float: left;
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }

注:margin: 0 auto;和text-align: center; 不能对浮动(脱标)元素生效