CSS之我是一个浮动元素(float)

简介: 大家好,我是一个浮动元素,我在CSS王国中是一个很重要的角色,也许你们现在在工作中很少见到我的身影,因为我的flex兄弟和position定位兄弟在大部分情况下可以取代我,但是我还是想详细的介绍一下我自己,毕竟我曾经也是一个在前端开发中随处可见的明星人物。

大家好,我是一个浮动元素,我在CSS王国中是一个很重要的角色,也许你们现在在工作中很少见到我的身影,因为我的flex兄弟和position定位兄弟在大部分情况下可以取代我,但是我还是想详细的介绍一下我自己,毕竟我曾经也是一个在前端开发中随处可见的明星人物。

为啥会有浮动元素的出现?

很久很久以前,网页排版中需要一种文字环绕的效果,于是我就被创造出来了,用来实现下面这样的效果👇,文字环绕着一个浮动的元素

image.png

而且使用我也很简单,只需要设置一个float: left或者right就可以了,代码如下:

image.png

后来很多聪明的前端工程师开始使用我来制作多列布局,比如下面这种

image.png

浮动元素的特点

上面讲了我出现的原因是用来做文字环绕,以及后面被前端工程师拿去做多栏布局,那么我到底有哪些特点呢?接下来我就好好聊聊👇
首先第一点呢,前面说了,我作为一个浮动元素会导致我后面的文字环绕在我周围,示例代码如下:

<div class="float1">
    浮动元素
</div>
<div>
    让浮动效果可视化
    我们可以在浮动元素上应用 margin,将文字推开,但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流,紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改,来观察到这个现象。
    在紧随浮动盒子的第一段文字上添加 special 类,然后在你的 CSS 文件中添加如下规则,它会赋予跟随其后的段落一个背景色。
    让浮动效果可视化
    我们可以在浮动元素上应用 margin,将文字推开,但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流,紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改,来观察到这个现象。
    在紧随浮动盒子的第一段文字上添加 special 类,然后在你的 CSS 文件中添加如下规则,它会赋予跟随其后的段落一个背景色。
    让浮动效果可视化
    我们可以在浮动元素上应用 margin,将文字推开,但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流,紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改,来观察到这个现象。
    在紧随浮动盒子的第一段文字上添加 special 类,然后在你的 CSS 文件中添加如下规则,它会赋予跟随其后的段落一个背景色。
    让浮动效果可视化
    我们可以在浮动元素上应用 margin,将文字推开,但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流,紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改,来观察到这个现象。
    在紧随浮动盒子的第一段文字上添加 special 类,然后在你的 CSS 文件中添加如下规则,它会赋予跟随其后的段落一个背景色。
</div>
.float1 {
    height: 100px;
    width: 100px;
    background-color: #69c0ff;
    float: left;
}

然后第二点呢,我作为浮动元素,我会脱离正常的文档流

比如说下面这个效果,蓝色的元素浮动到左边之后脱离了文档流,就导致红色的正常元素从它底下插了上来,这样就会造成一个问题,有时候前端工程师并不希望我浮动之后影响到我后面的元素,后面我会告诉大家如何解决这个问题

示例代码如下:

<div class="float2">
    float2
</div>
<div class="normal">
    正常的元素
</div>
.float2 {
    height: 100px;
    width: 100px;
    background-color: #69c0ff;
    float: left;
    opacity: 0.8;
}
.normal {
    height: 200px;
    background-color: #ff7875;
}

最后第三点呢,我会造成父元素的高度塌陷,比如下面这个例子👇

我浮动之后,我的父容器缩成了一根线,这就是父容器高度塌陷的问题

示例代码如下:

    <div class="wrapper">
        <div class="float3">
            浮动
        </div>
    </div>
    .wrapper {
        border: 1px solid;
    }
    .float3 {
        height: 200px;
        width: 200px;
        background-color: #69c0ff;
        float: left;
        clear: left;
        opacity: 0.8;
    }

解决浮动元素带来的问题

前面说了我作为一个浮动元素,会导致我后面的元素位置发生变化以及父元素高度塌陷的问题,下面我就讲讲如何解决这两个问题👇

首先,解决我后面的元素位置发生变化的问题,解决办法是可以给我后面出现的元素设置 { clear: left; },clear属性的意思是清除某个方向的浮动元素对我的影响,比如{ clear: left; }的意思就是清除左边浮动元素对我的影响,{ clear: both; }的意思就是清除左右两边的浮动元素对我的影响

比如下面这个例子,我后面的元素就没有被我的浮动所影响😸

示例代码:

    <div class="wrapper">
        <div class="float3">
            浮动
        </div>
        <div class="item1">
            正常元素,设置了{ clear: left; }
        </div>
        <div class="item2">
            正常元素
        </div>
    </div>
    .wrapper {
        border: 1px solid;
    }
    .float3 {
        height: 200px;
        width: 200px;
        background-color: #69c0ff;
        float: left;
        clear: left;
        opacity: 0.8;
    }
    .item1 {
        height: 80px;
        background-color: #ff9c6e;
        clear: left;
    }
    .item2 {
        height: 80px;
        background-color: #ffc069;
    }
    .item3 {
        height: 200px;
        background-color: #d3f261;
    }

然后再解决父元素高度塌陷的问题,当父容器元素里面只有1个浮动元素的时候,就无法使用上面这种clear的办法了,所以得想别的办法了

废话不多说,讲两个常见的办法:

  1. 设置父容器元素{ overflow: hidden; }

这个办法其实本质就是触发BFC,触发BFC后父元素的高度就会包含其中的浮动元素,至于什么是BFC我后面会继续写笔记聊到

  1. 给父容器加一个伪元素:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }

这个办法的本质其实就是创造一个父容器内处于最后的子元素,并且让它设置为{ clear: both },这样子就清除了浮动元素的影响,父元素高度就不会塌陷了

总结

我曾经是一种很好用的特性,但是现在却很少看到我,希望大家可以更多的了解我

相关文章
|
4月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
37 4
|
5天前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
42 3
|
22天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
22 0
|
2月前
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
78 3
|
1月前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
89 0
|
2月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
2月前
元素的浮动属性float
元素的浮动属性float。
16 6
|
3月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
29 5
|
3月前
元素的浮动属性float
【8月更文挑战第25天】元素的浮动属性float。
40 2
|
3月前
|
前端开发
CSS - 使用 clip-path 轻松实现正六边形块状元素
如何使用CSS的`clip-path`属性来创建正六边形的块状元素。文章提供了详细的HTML和CSS代码示例,展示了如何实现六边形的布局和样式,并通过CSS动画增强了视觉效果。最终效果是一个包含文本的可交互的正六边形元素,当鼠标悬停时会改变颜色。
150 0
CSS - 使用 clip-path 轻松实现正六边形块状元素