欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

一天搞定CSS: 浮动(float)及文档流--10

程序员文章站 2022-05-29 15:10:02
...

浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。

下面我们就来详细说明浮动!!!!!!!!

1.文档流

在浮动中有一个文档流的概念,所以在这里不得不介绍一下文档流了。

一天搞定CSS: 浮动(float)及文档流--10


代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            文档流
                文档中可显示的元素在排列时候的开始位置以及他们所占的区域
                因为页面中的元素分为不同的种类,所以他们会按各自的特点去显示,在页面中所占的区域不是一样的。会按从上到下,从左到右的顺序输出内容
        -->
        <!--<span style="background: red;">kaivon</span>
        <span style="background: red;">kaivon2</span>-->

        <!--<span style="background: red;">kaivon</span>
        <div style="width: 100px;height: 100px; background: red;">kaivon2</div>-->

        <!--<span style="background: red;">kaivon</span>
        <div style="width: 100px;height: 100px; background: red; display: inline-block;">kaivon2</div>-->

        <div style="width: 100px;height: 100px; background: red; ">kaivon1</div>
        <div style="width: 100px;height: 100px; background: green;">kaivon2</div>
    </body>
</html>

2.浮动

浮动:

使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来

浮动的目的:

为了达到自己的布局目的,让指定元素定位在指定位置,我们就需要用到浮动。


3.概述浮动float

通过控制属性float来,控制元素的位置

float取值:

1)left:向左浮动

2)right:向右浮动

3)none:没有浮动,默认值

4.浮动的特点

一天搞定CSS: 浮动(float)及文档流--10


5.代码演示

1).特点1234演示

1、块元素可以在一行显示

2、按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来

3、行内元素支持宽高

4、脱离文档流

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 200px;
                background: green;
                color: #fff;
                float: left;
            }
            span{
                background: red;
                width: 100px;
                height: 200px;
                float: right;
            }

            .father{
                float: none;
                border: 1px solid blue;
                margin: 100px;
                background:none;
                width: 100%;
                height: 500px;
            }

            a{
                float: right;
                width: 100px;
                height: 100px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <!--
            浮动          float
            定义          使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来
            值           left、right、none
            特征
                        1、块元素可以在一行显示
                        2、按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来
                        3、行内元素支持宽高
                        4、脱离文档流
        -->

        <!--2、按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来    最外层的div.father就是一个父容器-->
        <div class="father">
            <!--1、块元素可以在一行显示-->
            <div>div1</div>
            <div style="background: red;">div2</div>

            <!--3、行内元素支持宽高 a, span标签并没有做类型转变,那它是一个行内标签,是不能设置宽高的,但是这里可以了-->
            <span>span1</span>
            <a href="">a22222</a>
        </div>
        <!--4、脱离文档流  此时所有.father下的所有div,span,a标签都不是按正常的文档流循序排列了,说明脱离了文档流-->

    </body>
</html>

2).特点56演示

5、块元素默认宽度会被改变(包裹性)

6、父级高度塌陷(破坏性)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .parent{
                border: 1px solid #f00;
            }
            .box{
                width: 100px;
                height: 200px;
                background: green;
                color: #fff;
                float: left;
            }
            .width{
                height: 50px;
                border: 5px solid #0000FF;
                float: left;
            }
        </style>
    </head>
    <body>
        <!--
            浮动          float
            定义          使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来
            值           left、right、none
            特征
                        1、块元素可以在一行显示
                        2、按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来
                        3、行内元素支持宽高
                        4、脱离文档流
                            浮动后跟的元素(没有浮动)的位置是从前面浮动元素的位置开始的
                            注意:非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)
                        5、块元素默认宽度会被改变(包裹性)
                            块元素不设置宽度,那宽度会自动变成内容所撑开的宽度
                        6、父级高度塌陷(破坏性)
                            子元素有浮云后,那父级元素的高度不会自动撑开了
        -->

        <!--5、块元素默认宽度会被改变(包裹性)  正常情况下div会默认占据一行,浮动后宽高就由内容撑开-->
        <div class="width">alibaba</div>


        <!--6、父级高度塌陷(破坏性)-->
        <div class="parent">
            <div class="box">box</div>
        </div>
    </body>
</html>

3).特点7演示

7、换行不会被解析成空格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .parent{
                border: 1px solid #f00;
            }
            .box{
                width: 100px;
                height: 200px;
                background: green;
                color: #fff;
                float: left;
            }
        </style>
    </head>
    <body>
        <!--
            浮动          float
            定义          使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来
            值           left、right、none
            特征
                        1、块元素可以在一行显示
                        2、按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来
                        3、行内元素支持宽高
                        4、脱离文档流
                            浮动后跟的元素(没有浮动)的位置是从前面浮动元素的位置开始的
                            注意:非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)
                        5、块元素默认宽度会被改变(包裹性)
                            块元素不设置宽度,那宽度会自动变成内容所撑开的宽度
                        6、父级高度塌陷(破坏性)
                            子元素有浮云后,那父级元素的高度不会自动撑开了
                        7、换行不会被解析成空格
                            浮云后的元素就会脱离文档流了,那它就不属于文档流里的结构了,所以换行、空格都跟父级没关系了
        -->

        <!--7、换行不会被解析成空格-->
        <div class="parent">
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
        </div>
    </body>
</html>

6.浮动的副作用

地址:http://blog.csdn.net/baidu_37107022/article/details/71554283

7.清除浮动

地址:http://blog.csdn.net/baidu_37107022/article/details/71557806