6Blogger网页架构设计之Float 相关基础知识（二）

sfzy1 六月 07, 2023

万丈高楼从地起，我们也要先学习 Float 相关的基础知识，然后循序渐进，接下来直接上干货！


本文索引
None

什么是浮动？


当我们浮动元素时，此元素包含的内容就成为了块框，然后，这个块框就可以在当前行上向左或向右移动。标签格式为：“float: left”, “float: right” or “float: none”，我们还可以将几个浮动块框放在一起，没有浮动的元素是从上往下依次摆放，左浮动的就会从左往右依次摆放，右浮动的是从右往左依次摆放。

None

None

浮动元素将移动到哪里？


浮动只有左或右两个方向，而且没有数值，他到底移动多少呢？其实就是移动到它们的外边缘接触包含块的边缘或另一个浮动块框的外边缘；如果当前行上没有足够的水平空间用于浮动块框，它将逐行向下移动，直到一行有足够空间。

None
None

浮动项目需要宽度吗？


浮动项目上必须设置宽度，CSS规范中指出：浮动项目必须有明确的宽度；如果未设置宽度，则结果可能无法预测，因浏览器而异。从理论上讲，具有未定义宽度的浮动元素应收缩到其中最宽的元素。这可能是一个单词，一个句子甚至一个字符 。


None

浮动元素上方和下方的元素


None

浮动元素上方的块级元素不会受到它的影响。但是，下面的元素将环绕浮动元素，也就是不会遮挡其内容：


None

边框、背景图像和背景颜色


虽然内容将环绕浮动元素，不至于被遮挡，但边框、背景图像和背景颜色将延伸到浮动元素的下层，也就是下方元素的边框、背景图像和背景颜色会被遮挡；如果不希望浮动元素下方的元素环绕它，则可以使用“clear： left”、“clear： right”或“clear： both”将 clear 属性应用于下方的元素。。

None
None None

油管频道👉 https://bit.ly/2XNfakc 看最新视频，白嫖最新节点！

请朋友们优先使用订阅，特别是手机用户，更方便更快捷！




发表评论

0 评论

发表评论