CSS浮动

最新推荐文章于 2024-10-15 23:52:46 发布

原创最新推荐文章于 2024-10-15 23:52:46 发布 · 739 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

css小基础专栏收录该内容

4 篇文章

订阅专栏

浮动

浮动是css里面布局用的最多的属性。
float常跟属性值left、right、none
float:none 不使用浮动
float:left 靠左浮动
float:right 靠右浮动
在上篇文章中，我已经明确说明过，用标准流是做不出网页效果的。做网页就要考虑网页的布局，而无论多么复杂的布局，其基本的出发点均是“如何在一行显示多个div”，这就要用到浮动。浮动简单的理解为让某个div元素脱离标准流。让其漂浮在标准流之上，和标准流不是一个层次。
举个例子简单看一下，浮动的元素是如何脱离标准的。我们来做个简单的小对比。
先看标准流下显示的方式：
这里写图片描述
我们对div2 设置浮动，让div2 不再属于标准流，且看会发生怎样的变化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 200px;
                height: 50px;
                background-color: red;
            }
            .div2{
                float: left;
                width: 500px;
                height: 40px;
                background-color: blue;
            }
            .div3{
                width: 600px;
                height: 40px;
                background-color: green;
            }
            .div4{
                width: 400px;
                height: 50px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
    </body>
</html>

这里写图片描述
你是否明白了点什么？？？
如果看不明白，我们让div2向右浮动，看看结果：

通过上述例子我们会发现：div2浮动了，脱离了标准流，div1、div3、div4仍然在标准流中，所以div3会自动向上移动，占据div2的位置，重新组成了一个流。div1、div3、div4依次排列，成为一个新的流。
div2贴向页面的右边时，不再遮挡div3。大家可以清晰地看到div1、div3、div4组成的流。
如果我们同时让div2、div3同时向左浮动的时候，看看会出现什么效果？
这里写图片描述
同理，div2、div3浮动已经脱离了标准流，因此div4会自动上移，与div1形成新的标准流。但是我们会发现div3会紧跟随div2。也就是说在一行内实现了两个div的布局。
那么，我们也让div4进行左浮动，看效果。（因为我设置的div4的宽度太大，我稍微调小一点，让其width: 50px;height: 50px;大家看看效果）
这里写图片描述
但是如果，我回复div4原来的宽度，会怎样，你猜？

所以通过以上，我们得出结论：
**1.浮动的元素是脱离标准的
2.浮动的元素是互相贴靠的。如果没有足够的空间，那么就会被挤下来**
再来看个小例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 200px;
                height: 50px;
                background-color: red;
            }
            .div2{
                float: left;
                width: 300px;
                height: 40px;
                background-color: blue;
            }
            span{

                background-color: orange;
            }

        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <span>我是span</span>

    </body>
</html>

这里写图片描述

如果我们让span 进行左浮动，然后在给其设置宽度和高度，你猜会发生什么呢？

span{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}

这里写图片描述
我们会发现一个span标签不需要转换成块级元素，就能够设置宽度和高度了。所以能够证明一件事情，就是所有的标签元素已经不区分行内、块元素了。也就是说，一旦一个元素浮动了，那么就能够并排了，并且也能够设置宽度和高度，无论它是div还是span。

浮动的“字围”效果

<style type="text/css">
    div{
        float: left;
        width: 344px;
        height: 516px;
        background-color: red;
    }   
        </style>

        <div>
            <img src="img/1.jpg" alt="可爱"/>
        </div>
        <p>我是一只可爱美丽的小花猫！我是一只可爱美丽的小花猫！我是一只可爱美丽的小花猫！我是一只可爱美丽的小花猫！我是一只可爱美丽的小花猫！我是一只可爱美丽的小花猫！我是一只可爱美丽的小花猫！我是一只可爱美丽的小花猫！我是一只可爱美丽的小花猫！我是一只可爱美丽的小花猫！我是一只可爱美丽的小花猫！
</p>

这里写图片描述
div挡住了p ，但是p中的文字不会被挡住，形成“字围”效果

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。
比如：

<style type="text/css">
        div{
            float: left;
            background-color: pink;
        }
</style>

这个div浮动了，且没有设置宽度，那么将自动缩紧为内容的宽度
这里写图片描述
整个网页，就是通过浮动，来实现并排的。

关于浮动还想说一点：最好是永远不是一个东西单独浮动，浮动都是一起浮动，要浮动大家一起浮动。

有了浮动必然就会有清除浮动，如何清除浮动，请等待文章的发布。