前端中为何float会导致父元素塌陷?

图片[1]-前端中为何float会导致父元素塌陷?-不念博客

破坏性

**破坏性**float-float破坏父标记的原始结构,导致父标记塌陷。最根本的原因是:**带有浮点集的元素将离开文档流**。最根本的原因是,浮动设计的初衷是解决文本围绕图片的问题。你应该记住浮动的影响。

包裹性

**包裹性**也是float的一个非常重要的特性。使用float时,您必须熟悉此功能。让我们从一个小例子开始:

如果未设置普通div宽度,它将填充整个屏幕。在前面的盒子模型部分中也提到了这一点。如果在div中添加“float:left”,它会突然变得紧凑,宽度也会改变,将三个单词包装在内容中——这就是包装。为div设置浮点数后,其宽度将自动调整为包裹内容宽度,而不是填充整个父容器。

注意,尽管div是包装的,但其显示样式没有改变。它仍然是“显示:块”。

为什么要包装浮子?事实上,答案必须从浮动设计的初衷中找到,浮动设计旨在实现文本包装效果。文本环绕图像很容易理解,但是如果您想将文本环绕div呢?此时,如果div没有被“包裹”,则无法实现环绕效果。

清除空格

Float还有一个你可能不熟悉的功能——空白。像往常一样,让我们先举个例子。

<div style=“border:2px纯蓝色;padding:3px;”>
<img src=“image/1.png”/>
<img src=“image/2.png”/>
<img src=“image/3.png”/>
<img src=“image/4.png”/>
</div>

添加“float:left”后:

通常,img的中间会有空格,因为多个img标记会有换行符,浏览器也会识别空格变化。在第二幅图中,“float:left”样式被添加到img中,这意味着img之间没有空格。这四个IMG紧密相连。

如果你之前没有注意到,现在想想之前编写的程序是否具有此功能。为什么float适合网页布局(俗称“积木”)?原因是由浮动排版创建的网页非常适合,甚至苍蝇也不能在中间飞行。

“空白空间”特性的根本原因是浮动将导致节点脱离文档流结构。它不属于文档流结构,因此换行符和它周围的空格与它无关。它试图尽可能靠近一侧,这就是所谓的清理

------本页内容已结束,喜欢请分享------
© 版权声明
THE END
喜欢就支持一下吧
点赞89赞赏 分享
评论 抢沙发
头像
欢迎光临不念博客,留下您的想法和建议,祝您有愉快的一天~
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容