一文讲清CSS基础之浮动float原理

🕗 发布于 2024-09-27 10:31 css 前端

文章目录

前言

浮动最早是用来实现文字环绕效果，后期才被广泛用作页面布局。所以对于浮动的元素文字和行级元素总是环绕着他。浮动的用法是想要谁浮动就给那个元素加float:left或者float:right。下面说一下浮动的几个注意点。

1、演示基础代码

<style>
        .fu{
            background-color: gray;
            border: 1px solid black;

        }
        .zi{
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid black;
        }
        
    </style>

<body>
    <div class="fu">
        <div class="zi zi1">1</div>
        <div class="zi zi2">2</div>
        <div class="zi zi3">3</div>
         <span>5</span>  
    </div>
</body>

在这里插入图片描述

2、块级元素和行级元素都可以开启浮动，开启后不会独占一行

<style>
.zi1,.zi2,.zi3{
            
            float: left;
        }
        
        span{
            float: left;
            border: 1px solid black;
        }

 </style>

zi1,2,3和span5都开启了浮动，并且四个元素都向左紧密排列，中间没有缝隙
在这里插入图片描述

.span6,img{
            border: 1px solid black;
            background-color: orange;
        }

<img src="images/font1.png" alt="">
         <span class="span6">6</span>

插入两个未浮动的行级元素可以发现行级元素和浮动元素的之间也是紧密贴合的，而行级元素之间是有一定空隙的。
在这里插入图片描述

3、块级元素独占一行，如果上方有行级元素则空出行级元素的高度

并且如果行级元素中包含文本，行内块元素的对齐方式默认是文本基线对齐。
在这里插入图片描述

4、开启浮动后元素会脱离文档流，浮动流宽高由内容撑开

所有元素都浮动，父元素没有高度。
在这里插入图片描述
添加非浮动元素，撑开盒子

5、浮动元素的宽高也可以设定

.fu{
            background-color: gray;
            border: 1px solid black;
            width: 500px;
            height: 500px;

        }

给父元素设置宽高
在这里插入图片描述

6、行内块元素默认和文本元素基线对齐