float的使用

目的是让几个元素能够并排显示，方式有三种（参考链接：css如何让两个div并列在同一行）：

  1. 使用display的inline属性
  2. 通过设置float来让Div并排显示
  3. 对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面

float的使用

首先可以看一下float的相关的解释，有助于对float的使用。可以参考经验分享：CSS浮动(float,clear)通俗讲解

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        div,
        span {
            display: inline-block;
        }
        .span2 {
            float: right
        }
    </style>
</head>
<body>

    <div style="height: 40px;width: 80px;background-color: red">
        div1
    </div>
    <span style="height: 40px;width: 70px;background-color:blue">
        span1
    </span>
    <span class="span2" style="height: 40px;width: 70px;background-color:grey">
        span2
    </span>
</body>
</html>

输出结果：
div1 span1 span2

实战经验

BJUI框架中，两个span用了上述的方式没有并排。具体代码，就不展示了。总之，就是两个span或者两个div在某些场景下，设置上述float的属性没生效。

<!-- 实际代码，比这个复杂多了，但是大致结构如下 -->
<div>
    <span style="float:right">
        ss
    </span>
    <span  style="float:right">
        aa
    </span>
</div>

原因：具体原因，没有进一步确认分析。但可以初步猜测，是框架初始化渲染的时候，导致这些属性失效了。

方案：如果这一层失效了，可以再抽象一层，排除当前层的影响

<!-- 实际代码，比这个复杂多了，但是大致结构如下 -->
<div>
    <div style="float:right">
        <span >
            ss
        </span>
    </div>
    <div style="float:right">
         <span >
            aa
        </span>       
    </div>
</div>

display也遇到同样的问题

参考文献

posted @ 2020-11-03 22:35  梅谷暴君  阅读(598)  评论(0)  编辑  收藏  举报