css中float的使用

发布于:2022-08-02 ⋅ 阅读:(231) ⋅ 点赞:(0)

     我们时常能够看到css样式表中使用了float:left,float:right那么何时使用float?为什么需要使用float?

     首先网站中的HTML标签可以整体分为两类,其中包括行元素和块元素。其最明显的区别是块元素可以独立成行(每个块元素单独占一行)、并且块元素可设置大小、如果不给块元素设计宽度,那么块元素宽度等于父级宽度(宽度的自适应),常用块元素包括div,h1-6,p,ul,li,table,tr等。

     那么我们来举个例子:设置两个div(块元素,独立成行),利用css设置其背景颜色和长宽,我们会发现两个div单独占一行。

因而float的第一个作用:让块元素转变为行元素,实现两个块元素并排显示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .left{
                width: 300px;
                height: 300px;
                background-color: pink;
                float: left;
            }
            .right{
                width: 300px;
                height: 300px;
                background-color: aqua;
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="left"></div>
                <div class="right"></div>
    </body>
</html>

此时,我们在下面随便加一个div,设置背景颜色和宽高,我们会发现下面的div跑到了上面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .left{
                width: 300px;
                height: 300px;
                background-color: pink;
                float: left;
            }
            .right{
                width: 300px;
                height: 300px;
                background-color: aqua;
                float: left;
            }
            .bottom{
                width: 700px;
                height: 700px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="left"></div>
                <div class="right"></div>
        <div class="bottom"></div>
        
    </body>
</html>

       因而我们发现了第二个问题:文档流中内容,添加浮动后直接脱离了文档流,简而言之,就是添加浮动的元素不占位置。元素不占位置其兄弟元素找不到对应元素,为了解决这个问题,我们可以给其添加clear: both;清除浮动对他的影响。即在.bottom{}内部添加clear: both;

      浮动元素对于其父级元素来讲也不占位置,给父级元素添加overflow: hidden,取消子集元素对其浮动的影响,例如li填加浮动后ul便没有了高度,可以给ul添加上述css样式。其中overflow: hidden也可以用于轮播图中 ,使得超出的部分内容隐藏起来。

要注意,如果发现使用浮动没有并排,只有一个原因,那就是其宽度超出浏览器宽度,不足以让其浮动。


网站公告

今日签到

点亮在社区的每一天
去签到