为了账号安全,请及时绑定邮箱和手机立即绑定

有关浮动的位置问题

有关浮动的位置问题

qq_aslongas_0 2017-08-29 19:33:36
float能实现文本环绕效果是因为,元素浮动后,宽度实体依旧存在,且与文字处于同一文档流中,文字不会与浮动元素位置重叠,那为何浮动元素后跟的是个块级元素时,它们就会重叠呢
查看完整描述

2 回答

已采纳
?
qq_安安_17

TA贡献49条经验 获得超52个赞

你好,首先文字是否环绕与元素是块级元素还是行内元素无关,如下

span为行内元素,可以环绕

//img1.sycdn.imooc.com//59a55dc300015b3e04590354.jpg

p为块级元素,也可以环绕

//img1.sycdn.imooc.com//59a55dc30001a31f04650325.jpg

你所说的重叠应该是这种情况

<style type="text/css">
    .box1{
        width:300px ;
        height: 300px;
        background-color: pink;
        float: left;
    }
    .box2{
        width:300px ;
        height: 300px;
        background-color: blue;
    }

</style>
</head>

<body>
    <div class="box1">box1 </div>
    <div class="box2">box2</div>

</body>

由于box1左浮动,把box2背景区域遮挡

//img1.sycdn.imooc.com//59a55ec300010bf902820279.jpg

是因为:box1左浮动,相当于飘在页面,没有占据位置,box2就显示在页面最开始的地方,想显示可以清除浮动。
但是,请注意:box2在块级元素的文字没有发生重叠,而是环绕到box1的周围

为确保box2的文字与box1分开,因此显示到box1周围

浮动最初的目的:将浮动元素从文档的正常流中删除,使其他元素忽略他的位置。就是为了实现文字环绕浮动元素的功能

希望可以帮到你



查看完整回答
2 反对 回复 2017-08-29
  • qq_aslongas_0
    qq_aslongas_0
    非常感谢,但我还是不清楚为什么背景能重叠,而文字能显示出来,浮动的最初目的是,将浮动元素从文档的正常流中删除,使其他元素忽略它的位置,那文字为什么还能显示,文字为什么不能忽略浮动元素的位置?
  • qq_安安_17
    qq_安安_17
    你需要分清文档流和文字。 文档流是相对于盒子模型讲的 文本流是相对于文字段落讲的 元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在它身下布局。 但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是没有拖出文本流。
  • qq_安安_17
    qq_安安_17
    如果文字不认同原来盒子模型的位置,就和绝对定位一样了,浮动还有什么意义。
点击展开后面1
?
橋本奈奈未

TA贡献436条经验 获得超108个赞

float CSS属性指定一个元素应沿其容器的左侧或右侧放置,文本和内联元素将围绕它。

然后,该元素被从网页的正常流动中移除,尽管仍然保持部分的流动性(与绝对定位相反)。

建议观看站内的深入理解之float浮动教程。

查看完整回答
反对 回复 2017-08-30
  • 2 回答
  • 0 关注
  • 1895 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信