咋解释这种情况下浮动和相对定位产生的怪异布局
貌似是part4的search占了part5的位置顺便放一个demo看一下效果A Pen by Gizeta我给两个可行的解决方案1 给part4本身用position:relative;里面需要调整位置的元素用position:absolute;2 .part-four {overflow: hidden;}
■网友
原因主要有1.position:relative后你top了-290px去让他到你想要的位置,比如说下图先把relative去掉,隐藏掉part5
按理来说,这时候你的part5会出现在part4之下,因为relative会占据原有位置,但是你设置了part4高度等于layer高度,这时的h1啊p啊.search都成了part4 visibility显示出来的部分,所以说part5就紧跟着part4展现
2.float又按理来说他们不会影响其他元素了,但是你又有了float,而且大家都在一个bfc,所以说,float先根据normal flow定位,然后脱离文档流,然后文字所在的line的宽度又是根据容器宽度-float元素宽度而定,所以他就换到下一行了,可以试试把float的元素设置小一点看看,
就这样,关于bfc啊float啊可以看关于可视化格式模型和各种FC
■网友
跟BFC没关系难道跟KFC有关系么？1. 先说positoin:relative;relativeThis keyword lays out all elements as though the element were not positioned, and then adjust the element\u0026#39;s position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.所以relative 其实不改变整体布局和元素的实际位置，相当于会在原有位置留下一个该元素的坑，那么题主的布局其实实际上是这个样子：
2. float和BFC.Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.这里说了很重要的一点，float 样式影响的只是在同一个BFC里面的内容。假如：part-four和part-five不在一个BFC里面，那么理论上float应该不能影响part-five的布局。所以section tag并没有分隔开这个文档里面的BFC, 换句话说，part-four part-five中处于section一级的元素，都在一个盒子中 。。为啥？暂停一下我们先看一下啥玩意能产生一个BFC:A block formatting context is created by one of the following:
the root element or something that contains itfloats (elements where float is not none)absolutely positioned elements (elements where position is absolute or fixed)inline-blocks (elements with display: inline-block)table cells (elements with display: table-cell, which is the default for HTML table cells)table captions (elements with display: table-caption, which is the default for HTML table captions)elements where overflow has a value other than visibleflex boxes (elements with display: flex or inline-flex)所以我推测，题主的section元素overflow的设置是visible。所以从BFC角度看section元素并木有包裹住每个横栏的内容。但是 part-four 的section限制了高度，导致实际的布局上part-four有溢出的内容（这里就是指用了 relative 定位的标题栏和搜索栏中的内容）。这里的溢出内容为什么会影响布局？正常的内容当然不会，但是这里有一行float的样式的内容。回头看一下啥玩意能产生一个新的BFC? floats (elements where float is not none)于是，溢出的内容就在原始位置生成了一个KFC开始卖炸鸡并加入豪华套餐。这个看起来差不多是这个样子，像插积木一样卡在原来BFC的中间：
推荐阅读
- 左大玢|自从演了观音菩萨后，在她身上接连发生怪事，至今也解释不清！
- 汽车评测|2021款林肯冒险家进店实拍，配浮动中控屏＋全LCD仪表，搭2.0T
- 专家解释襄阳汉江大桥乌鸦成群：正常现象
- 白梦妍|白鹿也被疑擦发际线粉，遭吐槽和鞠婧祎撞同款，回应解释显无奈
- 京沪高铁|京沪高铁首批浮动票价出炉：5小时46分内的车价格都涨了
- 关于对立统一，在生活中有何体会
- 二维码有破损，咋还可以扫描出网址
- 医生|有人耳屎是干的，有人是湿的，两者有何不同？医生给出专业的解释
- 电压和电流的向量怎样理解为啥通过纯容或纯感会变化90度过求通俗的解释?
- 啊啊啊气炸了！这种情况下华硕是在欺诈买家吗该咋维权！