开发者社区> 问答> 正文

测试中float:left 和 block的问题?

这是button正常效果,可以想的通。
screenshot
screenshot

.div1{
            width: 100px;
            height: 20px;
            background-color: red;
            float: left;
        }
        .div2 {
            width: 100px;
            height: 20px;
            background-color: blue
        }

展开
收起
杨冬芳 2016-06-16 18:45:43 2019 0
1 条回答
写回答
取消 提交回答
  • IT从业

    div1加了float之后,脱离了文档流。div2占据了第一行的空间。div1开始占用真实空间后,覆盖了div2。并且使得div2里面的inline元素“准备”环绕div1。

    为什么没有环绕div1而是跑到了div1的下面呢?是因为div2跟div1的width一样。如果div2的宽度比div1大,大到足够装下你的文字部分即dddddddddddddddd。这段文字就会环绕div1了。楼上有同学说的把div2的宽度去掉,这时div2是block级元素会占据整行空间。

    2019-07-17 19:41:48
    赞同 展开评论 打赏
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
移动互联网测试到质量的转变 立即下载
给ITer的技术实战进阶课-阿里CIO学院独家教材(四) 立即下载
F2etest — 多浏览器兼容性测试整体解决方案 立即下载