07-CSS基础-浮动流

2019-08-08 本文已影响0人 xiaohan_zhang

网页的布局方式

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的。

标准流(文档流/普通流)排版方式
其实浏览器默认的排版方式就是标准流的排版方式。
在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版，

垂直排版: 如果元素是块级元素, 那么就会垂直排版；
水平排版: 如果元素是行内元素/行内块级元素, 那么就会水平排版；

浮动流排版方式
浮动流是一种"半脱离标准流"的排版方式
浮动流只有一种排版方式, 就是水平排版，它只能设置某个元素左对齐或者右对齐。(只是水平)

注意点:
浮动流中没有居中对齐, 也就是没有center这个取值
在浮动流中是不可以使用margin: 0 auto;

特点：
在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是块级元素/行内元素/行内块级元素都可以水平排版
在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

综上所述, 浮动流中的元素和标准流中的行内块级元素很像

定位流排版方式

浮动元素的脱标

脱标: 脱离标准流
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标。
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元素就会盖住后面一个元素。

浮动元素排序规则

相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面。

<style>
    .box1{
        float: left;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    .box2{
        float: left;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .box3{
        float: left;
        width: 150px;
        height: 150px;
        background-color: yellow;
    }
</style>

不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动。

<style>
    .box1{
        float: left;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    .box2{
        float: right;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .box3{
        float: left;
        width: 150px;
        height: 150px;
        background-color: yellow;
    }
    .box4{
        float: right;
        width: 200px;
        height: 200px;
        background-color: tomato;
    }
</style>

浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定。

<style>
    .box1{
        float: left;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .box3{
        float: left;
        width: 150px;
        height: 150px;
        background-color: yellow;
    }
    .box4{
        float: left;
        width: 200px;
        height: 200px;
        background-color: tomato;
    }
</style>

浮动元素贴靠现象

如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示。
如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠。
如果贴靠了前面所有浮动元素之后都不能显示下, 最终会贴靠到父元素的左边或者右边。

浮动元素字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象。
应用场景：图文混排

img{
    float: left;
    width: 100px;
    height: 100px;
}
p{
    width: 300px;
    height: 300px;
    background-color: yellow;
}

    <img src="images/timg.jpg" alt="">
    <p>篱落秋归见豆花，竹门当水岸横槎。今日立秋，同志们该贴秋膘了。篱落秋归见豆花，竹门当水岸横槎。今日立秋，同志们该贴秋膘了。篱落秋归见豆花，竹门当水岸横槎。今日立秋，同志们该贴秋膘了。篱落秋归见豆花，竹门当水岸横槎。今日立秋，同志们该贴秋膘了。篱落秋归见豆花，竹门当水岸横槎。今日立秋，同志们该贴秋膘了。篱落秋归见豆花，竹门当水岸横槎。今日立秋，同志们该贴秋膘了。篱落秋归见豆花，竹门当水岸横槎。</p>

盒子高度问题

在标准流中内容的高度可以撑起盒子的高度。

<style>

        div{
            background-color: red;
        }

        p{
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        
</style>
    
<div>
    <p></p>
</div>

在浮动流中浮动元素内容的高不可以撑起盒子的高。

<style>

        div{
            background-color: red;
        }

        p{
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        
</style>
    
<div>
    <p></p>
</div>

清除浮动

清除浮动方式一（不常用）
给前面的父盒子添加高度。
在企业开发中能不写高度就不写高度, 所以这种方式不常用。

    <style>
        body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*这里*/
            height: 50px;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            /*margin-top: 20px;*/
        }
        .box1 p{
            background-color: blue;
        }
        .box2 p{
            background-color: green;
        }
        p{
            float: left;
        }
    </style>
<body>
    <div class="box1">
        <p>火影</p>
        <p>海贼</p>
    </div>
    <div class="box2">
        <p>漩涡鸣人</p>
        <p>路飞</p>
    </div>
</body>

父盒子添加高度前

父盒子添加高度后

清除浮动方式二（不常用）
利用clear:both;属性清除前面浮动元素对我的影响。
使用clear:both之后margin属性会失效, 所以不常用。

<style>
    body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
    }
    .box2{
        background-color: purple;
        /*这里*/
        clear: both;
        /*margin无效*/
        margin-top: 30px;
    }
    .box1 p{
        background-color: blue;
    }
    .box2 p{
        background-color: green;
    }
    p{
        float: left;
    }
</style>
<body>
    <div class="box1">
        <p>火影</p>
        <p>海贼</p>
    </div>
    <div class="box2">
        <p>漩涡鸣人</p>
        <p>路飞</p>
    </div>
</body>

添加clear: both;前

添加clear: both;后

清除浮动方式三（不常用）
在两个有浮动子元素的盒子之间添加一个额外的块级元素。
注意：
在外墙法中可以通过设置额外标签的高度来实现margin效果。
搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用。

<style>
    body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
    }
    .box2{
        background-color: purple;
    }
    .box1 p{
        background-color: blue;
    }
    .box2 p{
        background-color: green;
    }
    p{
        float: left;
    }
    /*这里*/
    .wall{
        clear: both;
    }
    .h20{
        /*利用额外块级元素实现margin*/
        height: 20px;
        background-color: deepskyblue;
    }
</style>
<body>
    <div class="box1">
        <p>火影</p>
        <p>海贼</p>
    </div>
    <!--这里-->
    <div class="wall h20"></div>
    <div class="box2">
        <p>漩涡鸣人</p>
        <p>路飞</p>
    </div>
</body>

添加额外块级元素前

添加额外块级元素后

清除浮动方式四（不常用）
在前面一个盒子的最后添加一个额外的块级元素。
注意:
内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性,
和外墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。

<style>
    body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
    }
    .box2{
        background-color: purple;
        /*margin有效*/
        margin-top: 20px;
    }
    .box1 p{
        background-color: blue;
    }
    .box2 p{
        background-color: green;
    }
    p{
        float: left;
    }
    /*这里*/
    .wall{
        clear: both;
    }
</style>
<body>
    <div class="box1">
        <p>火影</p>
        <p>海贼</p>
        <!--这里-->
        <div class="wall"></div>
    </div>
    <div class="box2">
        <p>漩涡鸣人</p>
        <p>路飞</p>
    </div>
</body>

添加额外块级元素前

添加额外块级元素后

清除浮动方式五（推荐）
overflow:hidden的作用是清除溢出盒子边框外的内容。

给前面一个盒子添加overflow:hidden属性清除浮动。

<style>
    body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
        /*这里*/
        overflow: hidden;
        *zoom:1;
    }
    .box2{
        background-color: purple;
        /*margin有效*/
        margin-top: 20px;
    }
    .box1 p{
        background-color: blue;
    }
    .box2 p{
        background-color: green;
    }
    p{
        float: left;
    }
</style>
<body>
    <div class="box1">
        <p>火影</p>
        <p>海贼</p>
    </div>
    <div class="box2">
        <p>漩涡鸣人</p>
        <p>路飞</p>
    </div>
</body>

添加overflow:hidden;前

添加overflow:hidden;后
注意：
由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性；
IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个/zoom:1;
实际上/zoom:1能够触发IE8之前IE浏览器的hasLayout机制；
优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突；

*zoom:1;和_zoom:1的区别
这个是hack写法，用来识别不同版本的IE浏览器
_后面的属性只有IE6能识别
*后面的属性 IE6 IE7能识别

清除浮动方式六（推荐）
伪元素选择器：
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或给指定标签的内容后面添加一个子元素。
格式：

标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素

标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素

给前面的盒子添加伪元素来清除浮动。

<style>
    body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
    }
    .box2{
        background-color: purple;
        /*margin有效*/
        margin-top: 20px;
    }
    .box1 p{
        background-color: blue;
    }
    .box2 p{
        background-color: green;
    }
    p{
        float: left;
    }
    /*这里*/
    .clearfix::after {
        /*生成内容作为最后一个元素*/
        content: "";
        /*使生成的元素以块级元素显示,占满剩余空间*/
        display: block;
        /*避免生成内容破坏原有布局的高度*/
        height: 0;
        /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
        visibility: hidden;
        /*重点是这一句*/
        clear: both;
    }
    .clearfix {
        /*用于兼容IE, 触发IE hasLayout*/
        *zoom:1;
    }
</style>
<body>
    <div class="box1 clearfix">
        <p>火影</p>
        <p>海贼</p>
    </div>
    <div class="box2">
        <p>漩涡鸣人</p>
        <p>路飞</p>
    </div>
</body>

添加伪元素前

添加伪元素后

注意：
本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素；
添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性；
CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西；

清除浮动方式七
给前面的盒子添加双伪元素来清除浮动。

<style>
    body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
    }
    .box2{
        background-color: purple;
        /*margin有效*/
        margin-top: 20px;
    }
    .box1 p{
        background-color: blue;
    }
    .box2 p{
        background-color: green;
    }
    p{
        float: left;
    }
    /*这里*/
    .clearfix::before,.clearfix::after {
        content:"";
        display:table;
        /*重点是这一句*/
        clear:both;
    }
    .clearfix {
        zoom:1;
    }
</style>
<body>
    <div class="box1 clearfix">
        <p>火影</p>
        <p>海贼</p>
    </div>
    <div class="box2">
        <p>漩涡鸣人</p>
        <p>路飞</p>
    </div>
</body>

添加双伪元素前

添加双伪元素后

注意：
添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性；
支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
不支持 BFC的浏览器（IE5-7），通过触发 hasLayout 闭合浮动。

BFC
Block Formatting Context 块级格式化环境
BFC是CSS中的一个隐含属性，开启BFC的元素，会变成一个独立的布局区域。

高度塌陷问题：
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，将无法撑起父元素的高度，导致父元素的高度丢失。

元素开启BFC后的特点：
1、开启BFC的元素不会被浮动元素覆盖
2、开启BFC的元素子元素和父元素的外边距不会重叠
3、开启BFC的元素可以包含浮动的子元素，不会出现高度塌陷问题

如何开启BFC:
1、设置元素的浮动
2、将元素设为行内块元素
3、将元素overflow设为非visible
常用方式：overflow: hidden;