江苏龙网

  1. 首页 > 生活 > >

咋解释这种情况下浮动和相对定位产生的怪异布局( 二 )

咋解释这种情况下浮动和相对定位产生的怪异布局

假如在原样式基础上，给section.part-five （或者part-four）加一个样式 overflow:hidden; 使之生成一个新的BFC，那么将会隔断之前section的BFC并且根据搜索栏float元素的实际位置决定是排列在搜索栏BFC还是排在上一个section的BFC之后，说的比较绕，直接上图:咋解释这种情况下浮动和相对定位产生的怪异布局
【咋解释这种情况下浮动和相对定位产生的怪异布局】
我觉得我的理解差不多就是这样了，如果有不对的地方算我吹牛皮。欢迎交流
■网友
没那么多乱七八糟的什么BFC什么的。原因就一个 ：The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.float - CSS | MDN在不清除浮动的情况下，默认就是文字和inline 元素 环绕其周围。和占位什么的没关系。这是根本原因。不信你把P换成个100*100的div看看 是不是还有占位情况？问题不是出在P标签，而是出在了P里面的文字。可能有人会问那 part five 所有的元素都应该往下，而不应该在现在图中的位置这很简单 就是因为你part four 设置了高度了。超出部分默认就给盖住。没毛病。解决办法：把search overflow:hidden；
■网友
把问题补完先说说我写这个的思路，方便大神解决问题！```html \u0026lt;!-- start part four --\u0026gt;\t\t\u0026lt;section class="part-four"\u0026gt;\t\t\t\u0026lt;div class="layer"\u0026gt;\u0026lt;/div\u0026gt;\t\t\t\u0026lt;h1\u0026gt;查找新世界城市活动信息\u0026lt;/h1\u0026gt;\t\t\t\u0026lt;hr/\u0026gt;\t\t\t\u0026lt;p\u0026gt;每个城市都有不同的活动信息，请自主查询您所需要了解的城市！\u0026lt;/p\u0026gt;\t\t\t\u0026lt;div class="search"\u0026gt;\t\t\t\t\u0026lt;select\u0026gt;\t\t\t\t\t\u0026lt;option\u0026gt;中国\u0026lt;/option\u0026gt;\t\t\t\t\u0026lt;/select\u0026gt;\t\t\t\t\u0026lt;select\u0026gt;\t\t\t\t\t\u0026lt;option class="test"\u0026gt;省份\u0026lt;/option\u0026gt;\t\t\t\t\t\u0026lt;option class="test"\u0026gt;北京市\u0026lt;/option\u0026gt;\t\t\t\t\t\u0026lt;option class="test"\u0026gt;天津市\u0026lt;/option\u0026gt;\t\t\t\t\t\u0026lt;option class="test"\u0026gt;河北省\u0026lt;/option\u0026gt;\t\t\t\t\t\u0026lt;option class="test"\u0026gt;陕西省\u0026lt;/option\u0026gt;\t\t\t\t\t\u0026lt;option class="test"\u0026gt;内蒙古自治区\u0026lt;/option\u0026gt;\t\t\t\t\t\u0026lt;option class="test"\u0026gt;辽宁省\u0026lt;/option\u0026gt;\t\t\t\t\u0026lt;/select\u0026gt;\t\t\t\t\u0026lt;select\u0026gt;\t\t\t\t\t\u0026lt;option\u0026gt;城市\u0026lt;/option\u0026gt;\t\t\t\t\u0026lt;/select\u0026gt;\t\t\t\t\u0026lt;button\u0026gt;搜\u0026amp;nbsp;\u0026amp;nbsp;\u0026amp;nbsp;\u0026amp;nbsp;\u0026amp;nbsp;\u0026amp;nbsp;索\u0026lt;/button\u0026gt;\t\t\t\u0026lt;/div\u0026gt;\t\t\u0026lt;/section\u0026gt;\t\t\u0026lt;!-- stop part four --\u0026gt;\t\t\u0026lt;!-- stop part five --\u0026gt;\t\t\u0026lt;section class="part-five"\u0026gt;\t\t\t\u0026lt;ul\u0026gt;\t\t\t\t\u0026lt;li\u0026gt;\t\t\t\t\t\u0026lt;div class="bg bg01"\u0026gt;\u0026lt;/div\u0026gt;\t\t\t\t\t\u0026lt;p class="title"\u0026gt;北京活动\u0026lt;/p\u0026gt;\t\t\t\t\t\u0026lt;p\u0026gt;新社区大联盟\u0026lt;/p\u0026gt;\t\t\t\t\u0026lt;/li\u0026gt;\t\t\t\t\u0026lt;li\u0026gt;\t\t\t\t\t\u0026lt;div class="bg bg02"\u0026gt;\u0026lt;/div\u0026gt;\t\t\t\t\t\u0026lt;p class="title"\u0026gt;上海活动\u0026lt;/p\u0026gt;\t\t\t\t\t\u0026lt;p\u0026gt;新上海新夜景探索\u0026lt;/p\u0026gt;\t\t\t\t\u0026lt;/li\u0026gt;\t\t\t\t\u0026lt;li\u0026gt;\t\t\t\t\t\u0026lt;div class="bg bg03"\u0026gt;\u0026lt;/div\u0026gt;\t\t\t\t\t\u0026lt;p class="title"\u0026gt;深圳活动\u0026lt;/p\u0026gt;\t\t\t\t\t\u0026lt;p\u0026gt;全新海岸线观察点\u0026lt;/p\u0026gt;\t\t\t\t\u0026lt;/li\u0026gt;\t\t\t\t\u0026lt;li\u0026gt;\t\t\t\t\t\u0026lt;div class="bg bg04"\u0026gt;\u0026lt;/div\u0026gt;\t\t\t\t\t\u0026lt;p class="title"\u0026gt;香港活动\u0026lt;/p\u0026gt;\t\t\t\t\t\u0026lt;p\u0026gt;奢侈消费大派送\u0026lt;/p\u0026gt;\t\t\t\t\u0026lt;/li\u0026gt;\t\t\t\u0026lt;/ul\u0026gt;\t\t\u0026lt;/section\u0026gt;\t\t\u0026lt;!-- stop part five --\u0026gt;```## part four的实现：1、\u0026lt;section class="part-four\u0026gt;定高定宽，常规文档流2、由于 !(http://img.blog.csdn.net/20151121133821143)所以为了实现透明度0.2，使用\u0026lt;div class="layer\u0026gt;遮罩层，和 section 等高等宽3、由于遮罩层实现的影响，所以part four 的其他元素便使用相对定位，使其达到图示效果4、继续往下写，发现 part five 部分中的一个 p 元素十分异常，看上去有了高度（实际上什么样式都没有）经过我们小组讨论，得出以下结论,但还是不能理解float和relative情况下造成的布局混乱，实在想不明白，网上查询大都只是单独讲解float和position的知识点；而没有找到这两者对浏览器渲染造成的影响虽然 relative 定位不影响其他元素，就是不脱离文档流；换句话说也就是仍然占他原本占的位子，只是z-index变大，相对原始位置漂浮到指定地方可能有人会问那 part five 所有的元素都应该往下，而不应该在现在图中的位置；个人觉得relative改变只是只是把我们所理解的三维盒子移动了,而他原本的渲染时占位用的东西任然还在原地，暂且说成BFC吧，而absolute把元素连带BFC都拿走了，而part four中元素的BFC都在section盒子中，layer遮罩层只是把其他元素的三维盒模型赶了出来，现在通过relative 我又把这些元素的三维盒模型给赶了回去，所以就形成了part five中部分元素紧跟part four.可悲催是search 部分的子元素是浮动的，形成了新的BFC,不在受原来BFC的约束！我们通过relative只是强行把这些元素的三维盒子赶回了part five的section中！于是乎在成了现在这种局面？他死死的占据了那块位置，当然这只是猜想！还是想请大牛们解释下到底是为啥？另一个猜想：从结果来看，浏览器貌似是先渲染了search部分子元素的flaot,创建新的BFC,解除默认形成的section中BFC的约束；然后在对search整体相对定位，我们只是把这个元素三维盒子移到我们想要的位置，float创建BFC的位置它是继续站着吗？实在是不太明白，请大牛们帮忙解答下疑惑？当然仅仅想解决目前的bug的人就别回答了吧！解决bug还是会的！只想知道这是什么原因造成的？


推荐阅读


上一篇：怎样看待武书连的这份21年前的大学排名，可否比现在的榜客观

下一篇：GE的发动机监控系统每天获取超过1PB的数据，是实时通信传输数据吗使用啥通信手段呢