CSS中的浮动float

仙鹤__

已于 2023-04-03 23:22:09 修改

阅读量405

点赞数

文章标签： css 前端 css3

于 2023-04-03 22:59:32 首次发布

本文链接：https://blog.csdn.net/weixin_52629158/article/details/129941960

版权

1.1 什么是浮动？

CSS 的 float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

float（浮动），往往是用于图像水平排列，或让列表水平排列，浮动在布局中非常有用。

1.2 元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

一个元素设置浮动，紧挨着它的元素不设置浮动。他们在页面中是如何存在？

<style>
     *{
        margin:0;
        padding: 0;

        
    }
    .parent{
        width: 800px;
        height: 900px;
        border: 10px solid red;
    }
    .box1{
        width: 220px;
        height: 220px;
        background-color: blue;
        float:left;
    }
    .box2{
        width: 360px;
        height: 360px;
        background-color: skyblue;
        float:left;
    }
    .yl{
        width: 450px;
        height: 450px;
        background-color: green;
        float:left;
    }
    
    </style>
   
</head>
<body>
    <div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="yl"></div>
</body>
</html>

预览：

1.3 浮动元素的特点

浮动的性质：脱标、贴边、字围、收缩。

（1）浮动的元素脱标

浮动元素，脱离标准文档流（它当前就不在标准文档流里面了）。它在标准文档流中位置就被腾了出来。于是在标准文档流中的.box2就跑了上去。

在页面中你能看到它。但他不在标准文档流中。

（2）浮动的元素互相贴靠

浮动元素与浮动元素之间，是并排存在的。

特别注意：

a. 空间充足的情况下，浮动元素之间是互相贴靠，并排存在的。

b. 空间不足的情况下，

1）如果没有足够的空间，同时第2个元素高度比第一个元素小，那么第3元素会贴在第1个元素的后面显示。

2）如果没有足够的空间，同时第2个元素高度比第一个元素大，那么第3元素会贴左墙显示。

（3）标准文档流中的行元素，设置浮动之后，当前这个元素就可以设置宽度和高度了。（脱标的元素，是没有行、块、行内块这种方法）。

<style> 
        .tj{
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 浮动 */
            float: left;
        }
    </style>
</head>
<body>
<span class="tj">小汤汤</span>

（4）浮动元素（脱标元素），可以使用盒模型的5大属性。

 <style> 
        .xw{
            /* 我们希望这个容器在浏览器渲染的时候，占据的实际宽度是450像素 */
            width: 330px;
            height: 350px;
            padding-left: 100px;
            padding-top: 100px;
            border: 10px solid red;
            background-color: lightblue;
            /* 浮动 */
            float: left;
        }
        .yty{
            width: 500px;
            height: 500px;
            background-color: orange;
        }
    </style>
</head>
<body>
<a href="" class="xw">小王</a>

（5）浮动的元素有“字围”效果

注意：这个效果是单个元素浮动。

<style>
        body,div,img,p{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 760px;
            margin: 0 auto;
            outline: 1px dashed red;
        }
        .pic{
            width: 220px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <!-- 
            浮动的元素有“字围”效果

            我们让 包裹图片的这个.pic 盒子浮动 -->
        <div class="pic">
            <img src="img/1.jpg" alt="" width="220">
        </div>
        <div class="content">
            <p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p>
            <p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p>
            <p>大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p>
            <p>大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p>
            <p>夜梦极可怪。见一淡绿百合花，颈弱而花柔，花身略有斑点青渍，倚立门边微微动摇。在不可知的地方好像有极熟悉的声音在招呼：</p>
            <p>“你看看好，应当有一粒星子在花中。仔细看看。”</p>
            <p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p>
            <p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p>
        </div>
    </div>

预览：

（6）浮动元素的收缩性

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度

<style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
        }
        .menu{
            width: 600px;
            outline: 1px dashed red;
        }
        .menu li{
            float: left;
            background-color: orange;
        }
    </style>
</head>
<body>
    
    <ul class="menu">
        <li>小汤汤</li>
        <li>小杨</li>
        <li>小明</li>
    </ul>

注意：

我们给浮动元素，一般会设置宽度width。我们不单独在元素什么写float浮动。

如果我们在项目开发中，不给浮动的元素设置宽度，我们可以使用padding-left和padding-right。让元素在页面中有实际占有的宽度（li元素中里面的文本内容的宽度+左内边距+右内边距）。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
        }
        .menu{
            width: 600px;
            outline: 1px dashed red;
        }
        .menu li{
            float: left;
            padding-left: 50px;
            padding-right: 50px;
            background-color: orange;
            margin-right: 5px;
        }
    </style>
</head>
<body> 
    <ul class="menu">
        <li>小汤汤</li>
        <li>小杨</li>
        <li>小明</li>
    </ul>

1.4 css中浮动值的设置

float它的值有3个,分别是left、right、none。

float:left 左浮动

float:right 右浮动

float:none 不浮动

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 990px;
            margin: 0 auto;
            outline: 1px dashed red;
            overflow: hidden;
        }
        .son{
            width: 300px;
            height: 500px;
        }
        /* .son1{background-color: lightblue; float: left;}
        .son2{background-color: lightgreen; float: left;}
        .son3{background-color: lightsalmon; float: left;} */

        .son1{background-color: lightblue; float: left;}
        .son2{background-color: lightgreen; float: right;}
        .son3{background-color: lightsalmon; float: none;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="son son1">son1</div>
        <div class="son son2">son2</div>
        <div class="son son3">son3</div>
    </div>

全部左浮动预览：

son2右浮动：

son1左浮动，son2右浮动：

son1，son3左浮动，son2右浮动：

注意：

给元素设置float:none;之后，这个元素会在标准文档流中。例如：

.son1{background-color: lightblue; float: left;}
.son2{background-color: lightgreen; float: right;}
.son3{
  width: 400px;
  height: 600px;
       
  background-color: lightblue; 
  float: none;
}

仙鹤__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中的浮动float

如果我们在项目开发中，不给浮动的元素设置宽度，我们可以使用padding-left和padding-right。让元素在页面中有实际占有的宽度（li元素中里面的文本内容的宽度+左内边距+右内边距）。（3）标准文档流中的行元素，设置浮动之后，当前这个元素就可以设置宽度和高度了。1）如果没有足够的空间，同时第2个元素高度比第一个元素小，那么第3元素会贴在第1个元素的后面显示。2）如果没有足够的空间，同时第2个元素高度比第一个元素大，那么第3元素会贴左墙显示。一个元素设置浮动，紧挨着它的元素不设置浮动。
复制链接

扫一扫