Question

css中float与position冲突怎么解决！！急急急！

。a｛ width：980px； height：500px； margin：0 auto｝
。b｛ width：300px； height：500px；float：left; position:absolute｝
。bgh｛ width：300px； height:20px；position:relative; top:480px}
。c｛ width：300px； height：500px；float：left｝
。d｛ width：300px； height：500px；float：left｝

<div class="a">
<div class="b"></div>
<div class="bgh"></div>
<div class="c"></div>
<div class="d"></div>
</div>

结果悲剧了，b、c、d位置错乱了。如何解决？ 急急急~

本意：b、c、d水平排列，bgh漂浮在b的底部！
有什么办法解决么？各位大大！

Answer 1

bgh应该嵌套在b里吧？

还有去掉.b里的 position:absolute

Answer 2

如果按照你现在的结构的话

把b的position:absolute，给。bgh设置position:absolute；给a添加position:relative;
或者把bgh放在b里面，给b设置position:relative;bgh设置position:absolute;

Answer 3

Vue实践-CSS样式position/display/float属性对比使用

Answer 4

浮动？ 使用清楚浮动 clean：both 试试，或者把bgh拿出来 最后使用固定定位fixed