美文网首页
[前端] 深入理解float元素浮动&clear:both清除浮

[前端] 深入理解float元素浮动&clear:both清除浮

作者: 狂风中的小白君 | 来源:发表于2020-10-12 15:01 被阅读0次

之前面试时碰到了一道题目,要求让我使用伪元素来清除浮动,由于没有深入研究过clear:both这个CSS属性,没有搞清楚它是具体怎么做到消除浮动的,所以最终答得不太好,影响了面试。之后查了资料,写出这篇文章,希望帮助到一样刚入前端圈的同学们~


为什么要有float元素?

在初期,float解决的主要是文字环绕的问题,在word中就有类似的功能,试想我们把一张图片摆在一边,然后文字会环绕它展示。如下图这样

图1 MDN官方float应用场景

float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。

虽然我们经常会遇到float脱离文档流而造成的布局问题,但float的使用目的就使得它与绝对定位的本质区别:float元素需要使周围元素环绕于它。内联元素与p标签会识别float为正常文档流。

举个例子,下面是内联元素环绕浮动元素和p标签(它是块级元素,文本内容)环绕浮动元素时的布局。

图2 span标签环绕于float元素 图3 p标签环绕于float元素

与绝对定位不同,内联元素(span为例)可以识别到float元素,并布局在float div的右边;同时p标签文本也与float元素形成了环绕,但是可以通过加了颜色的border看出,p元素其实塌陷了,现在它的绘制起点与float div一样,都在左上角。如果这个div不是float元素的话,右边的p元素应该会换行(块级元素特性)。

联想一下,经常我们做前端会说的清除浮动解决了父级塌陷问题的场景,父级塌陷是下图这样的

图4 float元素引起的父级塌陷

可以发现,无论是父级块元素,还是同级周围块级元素,尽管文本形成了环绕,但是块级元素都会忽略float元素本身的布局,在同一行进行渲染。

也就是说,如果我们没有用某种方法让float元素后面换行,我们就会面临float元素行内的元素塌陷问题。这也就引出了我们下面的问题。

clear:both clear的是什么?

clear:both解决的核心问题是换行问题,以MDN网站上的实例来分析

图5 clear后的float布局

可以看到float left元素就变成了普通块级元素一样,文字不再环绕它,而是另起一行。而没有clear的右侧浮动元素,仍然被文字环绕着。

另外一种消除元素浮动的方法:BFC

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

两种比较方便的使用方法是

1. display: flow-root (其他的比如inline-block也可以)

2. overflow: 除了visible的其他值

总结

1. float 元素的核心目的是让周围元素环绕,清除浮动是解决父级元素塌陷的问题。

2. 清除浮动有两种方式:

   a. clear:both属性,常用空content + clear:both的伪元素来完成换行

   b. 块格式化上下文(Block Formatting Context,BFC) 包上浮动元素

相关文章

  • [前端] 深入理解float元素浮动&clear:both清除浮

    之前面试时碰到了一道题目,要求让我使用伪元素来清除浮动,由于没有深入研究过clear:both这个CSS属性,没有...

  • 清除浮动 clear:both 和 .clearfix

    给没有浮动的元素添加clear:both,就会清除元素两边的浮动效果(没有被该元素clear:both的清除的区域...

  • DIV+CSS布局3

    布局相关属性: 浮动属性——float:left right 清除浮动——clear:both 溢出处理——ov...

  • Day05

    1.盒子模型 2.实现导航 3.页面漂浮 float:right 向右浮动 可横向成行clear:both;清除浮...

  • 11.22 前端学习

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 前端06

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 06 前端学习

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 一篇文章带你了解CSS clear both清除浮动

    一、前言 CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要...

  • 清除浮动

    清除浮动 1、在浮动元素后面添加 clear:both 的空 div 元素 2、 给父元素添加 overflow:...

  • CSS clear both清除浮动

    原文地址:CSS clear both清除浮动 DIV+CSS clear both清除产生浮动我们知道有时使用了...

网友评论

      本文标题:[前端] 深入理解float元素浮动&clear:both清除浮

      本文链接:https://www.haomeiwen.com/subject/xcyupktx.html