标准文档流与浮动

超、凢脫俗 2021-10-19 06:34 314阅读 0赞

### 标准文档流 ###

HTML制作网页的时候,要遵循 从左到右,从上到下的顺序

#### 空白折叠现象 ####

存在于文字与图片之间

解决方法: 将这些元素放在一排,紧密相连

#### 高低不齐,底部齐平 ####

不同的元素,大小不一样,但是底部是在同意水平线上的

### 浮动 ###

标准文档流中只有两个元素: `块级元素`和`行内元素`

多个元素排在同一行: 行内元素特点

给元素设置宽高: 块级元素特点

浮动可以让元素脱离标准文档流, 就可以实现多个元素排在同一行并且可以给元素设置宽高

浮动是通过一个`浮动属性`来实现的

> float: left向左移动, right向右移动

*  浮动元素脱离标准文档流,不再占用空间
 *  浮动元素的层级比标准文档流里的元素层级高, 会覆盖标准文档流中的元素
 *  浮动元素会向左或者向右浮动

> 使用浮动之前

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ 
                width: 600px;
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
            }
            .div1{ 
                width:100px;
                height: 100px;
                background-color: red;
            }
            .div2{ 
                width:100px;
                height: 100px;
                background-color: blue;
            }
            .div3{ 
                width:100px;
                height: 100px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
        </div>
    </body>
    </html>

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2Mng4NGN3aG5qMzBwczBjcTN5aC5qcGc][]

> 使用浮动后

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ 
                width: 600px;
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
            }
            .div1{ 
                width:100px;
                height: 100px;
                background-color: red;
                /*给这一个元素使用浮动属性*/
                float:right;
            }
            .div2{ 
                width:100px;
                height: 100px;
                background-color: blue;
            }
            .div3{ 
                width:100px;
                height: 100px;
                background-color: green;
                
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
        </div> 
    
        
    </body>
    </html>

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2MnhiaWU5enNqMzBuaDA3ZHQ4ay5qcGc][]

红色块移动到右边, 不再占用空间, 飘起来了

#### 清除HTML标签默认内填充和外边距 ####

#### 浮动的案例 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            /*清除HTML标签默认内填充和外边距*/
            *{ 
                margin:0px;
                padding: 0px;
            }
            
            .nav{ 
                width: 960px;
                height: 40px;
                margin-right: auto;
                margin-left: auto
            }
    
            .nav ul{ 
                /*项目符号去除*/
                list-style: none;
            }
            .nav ul li{ 
                /*每一个li标签向左浮动*/
                float: left;
                width: 120px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
    
            </ul>
        </div>
    </body>
    </html>

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2Mnk3OXk3bjNqMzB1NDAzajc0OC5qcGc][]

#### 清除浮动 ####

经过浮动了元素, 会影响到下面的元素的排列布局

浮动元素的父元素没有将浮动元素包裹着

只要清除了浮动,不会影响到浮动元素下面的排版布局,浮动元素的父元素会将浮动元素包裹着

> 三种方法

*  给浮动元素的父元素设置一个固定的高度
 *  使用清除浮动的样式属性 `clear`
 *  使用 `overflow:hidde`n 来清除浮动

#####  #####

> 设置浮动前

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ 
                width: 600px;
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
            }
            .div1{ 
                width:100px;
                height: 100px;
                background-color: red;
                
            }
            .div2{ 
                width:100px;
                height: 100px;
                background-color: blue;
                
            }
            .div3{ 
                width:100px;
                height: 100px;
                background-color: green;
              
            }
            
        </style>
    </head>
    <body>
        <div class="box">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
        </div> 
        <h2>浮动与清除浮动</h2>
        
    </body>
    </html>

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2M2s3cGwyc3BqMzE3ODBndTc0by5qcGc][]

> 设置浮动后

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ 
                width: 600px;
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
            }
            .div1{ 
                width:100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            .div2{ 
                width:100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
            .div3{ 
                width:100px;
                height: 100px;
                background-color: green;
                float:right;
            }
            
        </style>
    </head>
    <body>
        <div class="box">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
        </div> 
        <h2>浮动与清除浮动</h2>
        
    </body>
    </html>

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2M2s4Y3QwbnZqMzB4cDA4NHQ4cy5qcGc][]

可以看到影响了底下文字的排版布局

> 使用clear

clear的三个值:

*  clear:left 清除左浮动
 *  clear:right 清除右浮动
 *  clear:both 两者都清除

这个属性一般用在最后一个浮动元素的下面, 在最后一个浮动元素的下面放一个空白的div, 作用是清除浮动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ 
                width: 600px;
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
            }
            .div1{ 
                width:100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            .div2{ 
                width:100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
            .div3{ 
                width:100px;
                height: 100px;
                background-color: green;
                float:right;
            }
            /*使用清除浮动样式clear*/
            .clear{ 
                clear:both;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
            
            <div class="clear"></div>
        </div> 
        <h2>浮动与清除浮动</h2>
        
    </body>
    </html>

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2M2tveWFoOHVqMzE1bzBhb3dlby5qcGc][]

> 使用overflow:hidden

原意是将溢出的部分进行隐藏

[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2Mng4NGN3aG5qMzBwczBjcTN5aC5qcGc]: /images/20211018/6d2800a5425a4d32b68c70370572400c.png
[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2MnhiaWU5enNqMzBuaDA3ZHQ4ay5qcGc]: /images/20211018/58df67d6ecc04ec2b2c1d84197979268.png
[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2Mnk3OXk3bjNqMzB1NDAzajc0OC5qcGc]: /images/20211018/1b7b5ea0faf94bb18740826b29eaa082.png
[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2M2s3cGwyc3BqMzE3ODBndTc0by5qcGc]: /images/20211018/9ab8ef1fda5c4913935cafc9c184c8b9.png
[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2M2s4Y3QwbnZqMzB4cDA4NHQ4cy5qcGc]: /images/20211018/1d3d7f16b48441b1acfc74ab31245e83.png
[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2M2tveWFoOHVqMzE1bzBhb3dlby5qcGc]: /images/20211018/d007b45a46944aa293a93eca25da83e5.png