简述浮动float

825 阅读8分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

简述浮动float


现在22年,个人觉得以后开发可能很少会用到浮动,应该大部分都是使用flex弹性布局和定位来实现,所以这里简单阐述一下浮动(不过审的话只能写多一点了😓)

1.为什么需要浮动?

没记错的话,浮动诞生初是用来做文字环绕效果的。很长一段时间内,浮动元素是所有Web布局方案的基础(很大程度依赖于clear属性)。但浮动并不是为布局而生的,与使用表格布局基本一样,把浮动做为布局工具算是无奈之举,那时别无他选。

见以下场景,用标准流可以很方便地实现以下效果吗:

  • 如何让多个块级盒子水平排列成一行
  • 如何实现一个盒子中的两个盒子分别左右对齐

答案是不能,有很多的布局效果,标准流没法完成,此时就可以利用浮动布局。因为浮动可以改变元素标签默认的排列方式

利用浮动布局时,常常需要搭配以下准则:

  • 多个块级元素 纵向 排列就用标准流
  • 多个块级元素 横向 排列就用浮动

2.浮动语法及特性

float属性用于创建浮动框,将目标移动到一边,直到左边缘或右边缘触及包含块或者 另外一个浮动框的边缘。

语法:
选择器 {float:属性值;}

重点的属性值有:
none ———— 元素不浮动(默认)
left ———— 元素向左浮动
right ————元素向右浮动

加了浮动之后的元素,会具有很多特性,需要我们掌握的:

👇👇👇👇👇👇
1.浮动元素会脱离标准流(俗称 脱标):
a.脱离标准流的控制(浮),移动到指定位置(动)
b.浮动的盒子不再保留原先的位置
<div class="box1">浮动的盒子</div>
<div class="box2">标准流的盒子</div>

    .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;

            float: left;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

在我给这个box1盒子加了浮动之后,他就脱离了标准流的控制 浮了起来,
那么原先的位置不保留,此时如果有别的标准流的盒子(浮动的盒子
只影响浮动盒子后面的标准流,不会影响前面的标准流),那么这个位置
就会被别的标准流的盒子占领。(举例:就像我在排队时,我突然飞到天上了
那我原本的位置,是不是被后面的人接上了😄)

image.png


                     👇👇👇👇👇👇
        2. 浮动的元素会一行内显示,并且顶部对齐

<div>1</div>
<div class="two">2</div>
<div>3</div>
<div class="four">4</div>

    div {
            width: 200px;
            height: 200px;
            background-color: pink;

            float: left;
            /* 
            当我给四个盒子设置浮动属性,他们就会在一行内显示 且 互相紧靠在一起不会有缝隙
            (除非一行不够放,会自动换行)并且顶部对齐 */
        }

        .two {
            width: 300px;
            height: 400px;
            background-color: skyblue;
        }

        .four {
            background-color: tomato;
        }

image.png


                 👇👇👇👇👇👇
        3. 浮动的元素会具有行内块元素的特性 

<span>1</span>
<span>2</span>
<div>divdivdiv</div>
<p>ppppp</p>

        span,
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 原本呢,span属于行内元素,直接设置宽高是不起效的,如果这时候,我给span
            设置了浮动,那么span就会具有行内块元素的特点 */
            float: left;
            /* 如果行内元素有了浮动,则不需要转换成块/行内块就可以直接给宽高 */
        }


        /* 
            任何元素都可以浮动,不管原先是什么模式的元素,只要添加了浮动后,就会具有
            和行内块元素相似的特性 */


        p {
            height: 300px;
            background-color: skyblue;
            /* 在不添加浮动时,p属于标准流,且宽度和父亲一样宽 */

            float: right;
            /* 
            当我给p这个块级盒子添加了浮动,他就有了行内块元素的特性,在具有height为300
            的基础上,他的宽与内容一样宽 
            注意!!之所以没和左边的盒子对齐,是因为p默认有一个margin为16px的外边距
            */
        }

image.png


3.注意事项

浮动和标准流父盒子搭配:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

一个元素动了,理论上其余兄弟元素也要浮动(要遵循的原则)
比如一个盒子里面有多个盒子,如果其中一个盒子动了,那么其他的盒子也应该 浮动,以免出现问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流


4.清除浮动

为什么要清除浮动?

  1. 理想中的状态是:让子盒子撑开父亲,有多少盒子,我父盒子就有多高

  2. 我不给标准流的父盒子设置宽高
    假设我父盒子里面的子盒子全部添加了浮动,那么这时候,本来不添加宽高的父盒子的高
    是与内容一样的,但是添加了浮动的盒子是不占位置的,所以哪怕这些子盒子
    有很多,但他们都不会撑开父盒子,父盒子的高度为0

  3. 由于父盒子很多情况下,不方便给宽高,但是子盒子浮动又不占有位置,最后父盒子
    高度为0时,就会影响下面的标准流盒子
    就是因为浮动元素不再占用原文档标准流的位置,对后面的元素排版产生影响

清除浮动的本质是清除浮动元素造成的影响

  • 如果父盒子本身有高度,则不需要清除浮动
  • 清除浮动之后,父级就会根据浮动的子盒子自动检测高度。
  • 父级有了高度,就不会影响下面的标准流了

语法

选择器 {clear:属性值}

值:
left —————— 不允许左侧有浮动(清除左侧浮动的影响)
right —————— 不允许右侧有浮动 (清除右侧浮动的影响)
both —————— 同时清除左右两侧浮动的影响

一般只用 clear:both

清除浮动的策略是:闭合浮动(意思就是只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子)

当然,只要没影响到后面的布局,也可以不清除浮动的!

清除浮动的方式1

额外标签法,也称隔墙法,是w3c推荐做法。虽然是推荐做法,但是不常用! 额外标签法会在最后一个浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>或者其他标签(如<br>等)

   <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>

        <!-- 
        额外标签法:
            注意!!!额外标签法新添加在最后一个浮动元素末尾的标签
            必需是块级元素
       
       比如换成 <span class="clear"></span> 就不会清除浮动了 -->
        
        
        <div class="clear"></div>
        <!-- 
        或者 <br class="clear">
        优点:通俗易懂,书写方便
        缺点:添加许多无意义标签,结构化较差 -->
    </div>
    <div class="footer"></div>
    .box {
            width: 900px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 300px;

            background-color: black;
        }

        .clear {
            clear: both;
        }

image.png

清除浮动方式2

可以给父级添加overflow属性,将其属性设置为hidden、auto、scroll
注意!是给父元素添加代码

优点: 代码简洁!
缺点: 无法显示溢出的部分!

就比如一个子盒子漏出了半边在父盒子外,这时候会被切掉, 因为清除了浮动,所以能出父盒子的不是标准流不是浮动,是定位

清除浮动方式3

::after伪元素法

::after方式是额外标签法的升级版。也是给父元素添加!
伪元素的写法是两个冒号,::after,写一个是为了照顾低版本浏览器
高版本浏览器会自动把一个冒号渲染成两个

当我给父标签添加这个after这个伪元素之后,他会在盒子的最后面
新增一个盒子,只不过这个盒子是行内元素,所以要转换成块元素(就像额外标签法)
之所以说是额外标签法的升级版,是因为这样做就不用再去增加一个标签了。
这个标签是通过CSS生成的,虽然样式更多,但结构更清晰
(只要结构里没有额外增加标签,这个代码就是最优的)

优点:没有增加标签,结构更简单
缺点:照顾低版本浏览器

有一些代表性网站也是这么清除浮动的:百度淘宝网易

清除浮动方式4

双伪元素清除浮动:

刚刚的after伪元素是在最后面生成一个盒子,现在before也是一样在最前面生成一个盒子

写法:

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
            /* 模式转换为表格*/
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

优点:代码更简洁
缺点:还是需要照顾低版本浏览器
代表网站:小米、腾讯也是这么清除浮动的

以上就是我对浮动的简述,感谢阅读~