详解 css float属性

Posted jiushui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了详解 css float属性相关的知识,希望对你有一定的参考价值。

一、什么是float?

  在css中float就是浮动的意思,简单来说,就是让元素浮动起来。如何理解?我们把网页想象成是拼图的底板,里面的元素就是一个个小的拼图块,所谓浮动就是让本来应该贴着拼图底板的块起来,这就是浮动,也是所谓的脱离文档流。标准文档流就是拼好的拼图。

二、使用float的结果?

  我们先定义3个div

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         #son1{
 9             width: 100px;
10             height: 100px;
11             background-color: burlywood;
12         }
13         #son2{
14             width: 200px;
15             height: 200px;
16             background-color: rgb(196, 222, 135);
17         }
18         #son3{
19             width: 300px;
20             height: 300px;
21             background-color: rgb(135, 173, 222);
22         }
23     </style>
24 </head>
25 <body>
26     <div id="parent">
27         <div id="son1">son1</div>
28         <div id="son2">son2</div>
29         <div id="son3">son3</div>
30     </div>
31 </body>
32 </html>

技术图片

 

 现在我们给son1设置float

float: left;//让元素向左浮动

技术图片

 

我们会看到,son2跑到了本应属于son1的位置,这就是上面所说的脱离文档流。----son1脱离了文档流,那它原来占据的位置就没东西了,但是也不能让它空着是吧,所以就由它后一个块元素son2顶替,那son2去了,son2自己原来的位置不是也没了嘛,所以它后面的块元素也会跟着补上。

下面我们把son2也设置浮动

技术图片

 

我们发现,son2在son1的旁边,并没有把son1再往上顶一层。原因在于整个网页就分为两层,标准文档流一层,脱离文档流一层。那它既然不能往上顶,所以只好委曲求全站旁边咯。

现在我们把三个son都设置浮动

技术图片

 

 诶,我们发现,这玩意有点意思哈,它可以让块级元素横着排,好爽诶,但是古人说过:“一个东西,有利必有弊。”(别问我是谁,问就是我瞎编的)

我们先不浮动,给parent加上背景颜色:

#parent{
            background-color: cadetblue;
        }

技术图片

 

 然后我们依次给son1、son2、son3加上浮动

son1

技术图片

 

 son2

技术图片

 

 son3

技术图片

 

 大家发现没,这个背景咋就最后都没有了呢?

我们调出开发工具(F12  一般浏览器都是这个)审查一下元素

技术图片

 

 嘿,这个parent的高度居然是0,不对呀,我们不是有元素吗?按理说它应该被撑开有高度才对呀,为啥呀?

因为本来在parent里面的元素全都浮起来了,那parent里面就没东西可以撑开它的高度了,所以它的高度为0。我们称这种为现象为父元素塌陷。

三、如何解决父元素塌陷?

我们上面分析,造成父元素塌陷的原因是因为里面没有元素可以撑开它的高度,那我们只要有东西可以撑开它就行了

下面有4种方法可以解决父元素塌陷问题:

  1.给父元素设置宽高(此处不做演示)

  2.给父元素设置overflow:hidden

  3.给父元素添加一个最小子元素,设置clear属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #son1{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            float: left;
        }
        #son2{
            width: 200px;
            height: 200px;
            background-color: rgb(196, 222, 135);
            float: left;
        }
        #son3{
            width: 300px;
            height: 300px;
            background-color: rgb(135, 173, 222);
            float: left;
        }
        #parent{
            background-color: cadetblue;
        }

        #littleSon{
            clear: both;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son1">son1</div>
        <div id="son2">son2</div>
        <div id="son3">son3</div>
        <div id="littleSon"></div>
    </div>
</body>
</html>

技术图片

 

 

技术图片

  4.给父元素添加一个伪类设置clear

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #son1{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            float: left;
        }
        #son2{
            width: 200px;
            height: 200px;
            background-color: rgb(196, 222, 135);
            float: left;
        }
        #son3{
            width: 300px;
            height: 300px;
            background-color: rgb(135, 173, 222);
            float: left;
        }
        #parent{
            background-color: cadetblue;
        }

        /* #littleSon{
            clear: both;
        } */

        .clear::after{
            content: ‘‘;
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="parent" class="clear">
        <div id="son1">son1</div>
        <div id="son2">son2</div>
        <div id="son3">son3</div>
        <!-- <div id="littleSon"></div> -->
    </div>
</body>
</html>

 

技术图片

 

 技术图片

 

以上是关于详解 css float属性的主要内容,如果未能解决你的问题,请参考以下文章

css float属性详解

css float属性设置问题?

通俗易懂的CSS的浮动float详解

[TimLinux] CSS float和position详解

详解CSS的Flex布局

CSS float浮动的深入研究详解及拓展