一天搞定CSS：浮动（float）及文档流--10

我会带着你远行 2022-06-16 08:06 185阅读 0赞

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

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

# 1.文档流 #

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

![这里写图片描述][SouthEast]

--------------------

**代码演示**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            
            
    
            
    
            
    
            <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.浮动的特点 #

![这里写图片描述][SouthEast 1]

--------------------

# 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>
            
    
            
            <div class="father">
                
                <div>div1</div>
                <div style="background: red;">div2</div>
    
                
                <span>span1</span>
                <a href="">a22222</a>
            </div>
            
    
        </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>
            
    
            
            <div class="width">alibaba</div>
    
    
            
            <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>
            
    
            
            <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][http_blog.csdn.net_baidu_37107022_article_details_71554283]

# **7.清除浮动** #

**地址：[http://blog.csdn.net/baidu\_37107022/article/details/71557806][http_blog.csdn.net_baidu_37107022_article_details_71557806]**

[SouthEast]: /images/20220616/b181c4efb5fc4d109567023af0b627d8.png
[SouthEast 1]: /images/20220616/3a610102466f4c7e94461bc37f91d80f.png
[http_blog.csdn.net_baidu_37107022_article_details_71554283]: http://blog.csdn.net/baidu_37107022/article/details/71554283
[http_blog.csdn.net_baidu_37107022_article_details_71557806]: http://blog.csdn.net/baidu_37107022/article/details/71557806