流布局
1、常规流中的块和内联布局
块级元素所具有的行为:
在一个块格式区域中,盒子会从包含块的顶部开始,按序垂直排列。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。
在一个块格式区域中,每个盒子的左外边缘会与包含块左边缘重合(如果是从右到左的排版顺序,则盒子的右外边缘与包含块右边缘重合)。
行内元素所具有的行为:
在内联格式区域中,盒子会从包含块的顶部开始,按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐:可以底部对齐或顶部对其,或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。
1.1 外边距折叠(重合)
在规范中提到,块级元素之间的外边距会发生折叠。这意味着,如果一个具有上边距的元素排在在一个具有下边距的元素之下时,他们之间的间距不会是这两个外边距的和,即外边距会发生折叠,简单来说就是,间距与两个外边距中的较大者一样大。
在下面的例子中,段落的上边距设为 20px,下边距设为 40px,而段落之间的间距大小会是 40px。这是因为第二段中的上边距比较小被折叠,间距跟随了第一个段落更大的下边距。
<div class="box">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of millions
of people had watched the rising smoke-wreaths of their fires without
drawing any special inspiration from the fact.”
</p>
</div>
p {
border: 2px solid green;
margin: 20px 0 40px 0;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p7aBJ8cy-1676685038428)(…/…/…/static/notes/流式布局1.png “流式布局1”)]
2、应用或脱离流布局
下列元素会脱离常规流:
-
成为浮动的元素(float 属性)
-
通过设置 position 属性为 absolute 或者 fixed 的元素
-
根元素
脱离常规流的元素会创建一个新的块级格式化上下文(Block Formatting Context: BFC)环境,其中包含的所有元素构成了一个小的布局环境,与页面中的其他内容分隔开来。而根元素,作为页面中所有内容的容器,自身脱离常规流,为整个文档创建了一个块级格式化上下文环境。
2.1 float 元素
作为一个浮动的元素,它首先根据正常 flow 布局,然后从流动中取出并尽可能地向左移动。
<div class="box">
<div class="float">I am a floated box!</div>
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of millions
of people had watched the rising smoke-wreaths of their fires without
drawing any special inspiration from the fact.”
</p>
</div>
p {
background-color: #ccc;
}
.float {
float: left;
font-weight: bold;
width: 200px;
border: 2px dotted black;
padding: 10px;
}
你可以看到下面段落的背景颜色在下面运行,只是该段落的行框已被缩短以导致在浮动周围包裹内容的效果。我们段落的方框仍然按照正常流程规则显示。这就是为什么要在浮动项目周围留出空间,必须为项目添加边距,以便将线框推离它。您无法对以下内插内容应用任何内容来实现此目的。
2.2 定位
设置元素属性为 position: absolute 或者 position: fixed 会使此元素脱离文档流,他本来占据的空间也会被移除。
设置 position: fixed 也能使元素脱离文档流,但是偏移量会根据视口而不是父元素来定。
当通过定位方式使元素脱离文档流,元素内容可能重叠,这需要你自己去处理。脱离文档流意味着页面中的其他元素不知道该元素的存在,故不会对该元素做出响应。
2.3 相对定位
如果你给一个元素开启相对定位,那该元素依然会位于文档流中,然而你可以通过设置偏移值的方式来移动他。正如下面的例子所展示的,该元素的原先占据的空间仍然会被保留。
当你移动一个元素或者使元素脱离文档流,为防止重叠,你可能需要对元素内容和元素周围的内容做一些管理,要么清除浮动,要么保证相对定位不会覆盖其他元素。