有关浮动的位置问题

float能实现文本环绕效果是因为,元素浮动后,宽度实体依旧存在,且与文字处于同一文档流中,文字不会与浮动元素位置重叠,

那为何浮动元素后跟的是个块级元素时,它们就会重叠呢

qq_aslongas_0
浏览 1857回答 2
2回答

qq_安安_17

你好,首先文字是否环绕与元素是块级元素还是行内元素无关,如下span为行内元素,可以环绕p为块级元素,也可以环绕你所说的重叠应该是这种情况<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背景区域遮挡是因为:box1左浮动,相当于飘在页面,没有占据位置,box2就显示在页面最开始的地方,想显示可以清除浮动。但是,请注意:box2在块级元素的文字没有发生重叠,而是环绕到box1的周围为确保box2的文字与box1分开,因此显示到box1周围浮动最初的目的:将浮动元素从文档的正常流中删除,使其他元素忽略他的位置。就是为了实现文字环绕浮动元素的功能希望可以帮到你

橋本奈奈未

float CSS属性指定一个元素应沿其容器的左侧或右侧放置,文本和内联元素将围绕它。 然后,该元素被从网页的正常流动中移除,尽管仍然保持部分的流动性(与绝对定位相反)。 建议观看站内的深入理解之float浮动教程。
打开App,查看更多内容
随时随地看视频慕课网APP